html - change image display into inline -
i making image slider .i trying display images inline .i have apllied css not working :( image not displayed inline. property need change please help.
<div id="f1_container"> <div id="f1_card1" class="shadow"> <div class="front face"> <img src="thumb1.jpg" style="height: 281px; width: 450px;" /> </div> <div class="back face center"> text inside here </div> </div> <br/> <br/> <div id="f1_card2" class="shadow"> <div class="front face"> <img src="thumb2.jpg" style="height: 281px; width: 450px;" /> </div> <div class="back face center"> text2 </div> </div> </div>
this css file,
#f1_container { position: relative; margin: 10px auto; width: 450px; height: 281px; z-index: 1; } #f1_container { -webkit-perspective: 1000; perspective: 1000; } #f1_card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 1.0s linear; transform-style: preserve-3d; transition: 1.0s linear; } #f1_container:hover #f1_card { -webkit-transform: rotatey(180deg); transform: rotatey(180deg); box-shadow: -5px 5px 5px #aaa; } .face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .face.back { display: block; -webkit-transform: rotatey(180deg); transform: rotatey(180deg); box-sizing: border-box; color: white; text-align: center; background-color: #aaa; }
thanks , regards,
i solved issue increasing body width in css.