skoster7 skoster7 - 3 months ago 14
CSS Question

How to hide a div containing text behind an image in 3D transform

I've been trying to make three images with a 'flipcard' effect for around a day and a half now and think I'm pretty close to a solution.

However, as you can see on the codepen, the only problem left is that when my images are in a static state (i.e. not being hovered over) you can still see the text lying on top of them.

I'd really appreciate it if anyone could come up with a way so that when the images are static, there is no text lying on top of them, but when they are hovered over they animate with the 'flipcard' effect - such as already occurs.

Basically, I'd just like the text hidden/removed when the images are in a static state but visible after the animation occurs - as if they were on the 'flipside' of the images! The rest is fine.

Appreciate any answers in advance, thanks guys! :-)

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;
}

Answer

The photo and back elements should be siblings (and not parent/child).

Here is a snippet (changed width/height of the elements to fit SO):

.flexcontainer {
  display: flex; 
  perspective: 700px; 
}

.photo {
  width: 200px;
  height: 150px; 
  transform: rotateY(0deg); 
}
.photo img {
  width: 200px;
  height: 150px;
}

.photo-container {
  transform-style: preserve-3d;
  transition-property: transform;
  transition-duration: 2s; 
  position:relative;
  width: 200px;
  height: 150px; 
  margin:10px;
}

.photo-container:hover {
  transform: rotateY(-180deg); 
}

.back {
  transform: rotateY(180deg); 
  color: red;
}
.photo,
.back {
  backface-visibility: hidden; 
  position:absolute;
  left:0;
  top:0;
}
.back {
  transform: rotateY(180deg); 
}
<div class="flexcontainer">

  <div class="photo-container">
    <div class="photo">
      <img src="https://media2.giphy.com/media/kiXLfqncf42kg/200_s.gif" class="front">
    </div>
    <div class="back">Christmas tree</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>
    <div class="back">Happy Birthday</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>
    <div class="back">Halloween</div>
  </div>
</div>

And a working codepeng:
http://codepen.io/anon/pen/Egazvq?editors=1100