Image with text on the back - CSS3 and oldIE

image-with-text-on-the-back-css3-and-oldie.markdown

Image with text on the back - CSS3 and oldIE

A Pen by Jens Grochtdreis on CodePen.

License.

index.html

<h1>Swapping an image</h1>
<p>Works in all modern browsers. In a former version of this pen there was an alternative for IE8 an IE9 beneath. But these browsers are dead and gone - mostly.</p>
<div class="clearfix modern">
  <figure class="switcher">
    <img src="http://unsplash.it/300/400" alt="Super Alternativtext">
    <figcaption>
      <h2>Räuber Hotzenplotz</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident atque optio repellat, vel dignissimos nulla, nesciunt a quo saepe temporibus error earum incidunt quisquam, excepturi consequuntur laudantium odit debitis unde.</p>
    </figcaption>
    <footer>
      <p>Bio on the back, please hover!</p>
    </footer>
  </figure>

  <figure class="switcher">
    <img src="https://picsum.photos/300/400" alt="Ein noch besserer Alternativtext">
    <figcaption>
      <h2>Lodda seine Mudda</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eius earum ad voluptate nisi voluptas consequuntur ipsam veniam, saepe suscipit explicabo quibusdam, perferendis est in numquam itaque hic officia accusamus.</p>
    </figcaption>
    <footer>
      <p>Bio on the back, please hover!</p>
    </footer>

  </figure>
</div>

style.scss

.modern {
  .switcher {
    position: relative;
    perspective: 1000px;
		
    &:hover {
      img, footer {
        transform: rotateY(-180deg);
      }
      figcaption {
        transform:rotateY(0);
      }
    }
    img,
    figcaption, 
    footer {
      backface-visibility: hidden;
      transition: transform 1s ease-out;  
    }
    figcaption {
      transform: rotateY(180deg);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 20px;
    }
    footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 10px;
      background-color: rgba(0,0,0,0.5);
      p {
        color: #fff;
        margin: 0;
      }
    }
  }
}

/* ---- just for test ---- */
.switcher {
  width: 300px; 
  float: left;
  margin-right: 20px;	
}

styles

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/basics_3.css" rel="stylesheet" />