I need help with flipping over div elements on hover. I have a few questions:
How can I adjust the flip speed for when the user is no longer hovering? I was able to change the flip speed to 0.5s duration on hover, but how do I control the off-hover speed?
Why does the background color of the front and back face act as transparent/glass where you can see both faces simultaneously? I only want to display the back face without any mirroring effect.
Any suggestions would be appreciated.
If you're unable to see the transparency issue, here's an image for reference.
https://i.sstatic.net/mvnDL.png
The intended result is a solid color panel displaying "ipsum" and "something." The mirror image of the front face should not be visible.
.flip_container {
position: relative;
margin: 10px auto;
width: 270px;
height: 200px;
z-index: 1;
}
.flip_container {
perspective: 1000;
}
.flip_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
.flip_container:hover .flip_card {
transform: rotateY(180deg);
transition-duration: 0.5s;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
font-family: tahoma, sans-serif;
text-align: center;
}
.face.front {
font-weight: bold;
font-size: 13pt;
color: white;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
}
.imagebox {
width: 260px;
height: 160px;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
}
.imagebox img {
width: 250px;
height: 150px;
margin-left: auto;
margin-right: auto;
}
.flip_card.purpleline {
background-color: #BAADBA;
}
.flip_card.blueline {
background-color: #ADB3BA;
}
.smaller {
font-size: 11pt;
}<div class="flip_container">
<div class="flip_card purpleline">
<div class="front face">
<div class="imagebox">
<img src="http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg" />
</div>
cat
</div>
<div class="back face">
ipsum
<br/><br/>
<span class="smaller">
sometext
</span>
</div>
</div>
</div>
<div class="flip_container">
<div class="flip_card blueline">
<div class="front face">
<div class="imagebox">
<img src="http://animalia-life.com/data_images/dog/dog7.jpg" />
</div>
dog
</div>
<div class="back face">
lorem
<br/><br/>
<span class="smaller">
sometext
</span>
</div>
</div>
</div>