I've been working on creating three images with a fun 'flipcard' effect for the past day and a half, and I believe I'm getting closer to achieving my goal.
However, there is one issue remaining, as you can see in the codepen. When the images are in their static state (not being hovered over), the text on top of them is still visible.
If anyone has any ideas on how to hide the text when the images are static, but have it appear when they are hovered over and animate with the 'flipcard' effect, I would greatly appreciate it!
Essentially, I want the text to be hidden or removed when the images are static, but then become visible after the flip animation - almost as if it's on the backside of the images! Everything else seems to be working fine.
Thank you in advance for any solutions, much appreciated! :-)
Codepen link - http://codepen.io/skoster7/pen/kkYEJk?editors=0100
HTML:
<div class="flexcontainer">
<div class="photo-container">
<div class="photo">
<img src="https://media2.giphy.com/media/kiXLfqncf42kg/200_s.gif" class="front" />
<div class="photo-desc back">Christmas tree</div>
</div>
</div>
<div class="photo-container">
<div class="photo">
<img src="http://hdwallpaperpoint.com/wp-content/uploads/2016/05/Happy-birthday-candles-on-cake-small-cake-hd-4k-wallpaper-300x200.jpg" class="front" />
<div class="photo-desc back">Happy Birthday</div>
</div>
</div>
<div class="photo-container">
<div class="photo">
<img src="https://www.walldevil.com/wallpapers/a76/thumb/halloween-jack-o039-lantern-pumpkin-ghost-cat-skull-spider.jpg" class="front" />
<div class="photo-desc back">Halloween</div>
</div>
</div>
</div>
CSS:
.flexcontainer {
display: flex;
perspective: 700px;
}
.photo {
position: relative;
z-index: 1000;
}
.photo-desc {
position: relative;
z-index: 100;
}
.photo-container {
position: relative;
margin-right: 10px;
transition-property: transform;
transition-duration: 2s;
transition-style: preserve-3d;
backface-visibility: hidden;
}
.photo-container:hover {
transform: rotateY(-180deg);
}
.back {
backface-visibility: visible;
position: absolute;
top: 10;
margin-top: -200px;
transform: rotateY(-180deg);
color: red;
}