I am currently working on an image slider and I'm having issues with displaying the images inline. I have applied CSS but unfortunately, it's not working as expected. The images are not being displayed inline. Can someone please advise on what property needs to be changed? Your help is greatly appreciated.
<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">
Some text inside here
</div>
</div>
<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>
Below is my CSS code:
#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: all 1.0s linear;
transform-style: preserve-3d;
transition: all 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;
}
Thank you for your assistance.