JSFiddle - React, Tailwind, and code Playground

by mstalfoort

HTML

<ul>
  <li class="image3d">
    <figure>
      <img src="http://placekitten.com/g/300/200" alt="mittens">
      <figcaption><p><strong>Mittens</strong> loves to play with yarn and stuff.</p></figcaption>
    </figure>
  </li>
  <li class="image3d">
    <figure>
      <img src="http://placekitten.com/g/300/200" alt="mittens">
      <figcaption><p><strong>Mittens</strong> loves to play with yarn and stuff.</p></figcaption>
    </figure>
  </li>
</ul>

CSS

*{margin:0;padding:0;}
  footer,section,header{display:block;}
  html,body{
    font-size:15px;font-family:helvetica,arial,sans-serif;
    background:#333;
    color:#ccc;
  }
  
  .image3d{
    list-style:none;
    font-family:calibri,inherit;
    font-size:20px;
    position:relative;
    -moz-perspective:800px;
    -webkit-perspective:800px;
    -ms-perspective:800px;
    -o-perspective:800px;
    perspective:800px;
    width:300px;
    overflow:hidden;
    margin:1em;
    height:200px;
    background: #111;
  }
  .image3d img{
    -webkit-transition:-webkit-transform 1s;
    -moz-transition:-moz-transform 1s;
    -o-transition:-o-transform 1s;
    -ms-transition:-ms-transform 1s;
    transition:transform 1s;
  }
  .image3d figcaption{
    position:absolute;
    top:0;
    background:rgba(0,0,0,0.7);
    color:#fff;
    border-radius:5px;
    left:300px;
    top:50px;
    width:200px;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
  }
  .image3d strong{
    display:block;
    color:lime;
    padding:5px 0;
  }
  .image3d p{
    display:block;
    color:white;
    padding:5px;
  }
  .image3d:hover figcaption{
    left:100px;
  }
  .image3d figure:hover img{
      -webkit-transform:rotateY(50deg) rotateX(10deg) translateX(150px) translatez(-200px);    
      -moz-transform:rotateY(50deg) rotateX(10deg) translateX(150px) translatez(-200px);    
      -ms-transform:rotateY(50deg) rotateX(10deg) translateX(150px) translatez(-200px);    
      -o-transform:rotateY(50deg) rotateX(10deg) translateX(150px) translatez(-200px);    
      transform:rotateY(50deg) rotateX(10deg) translateX(150px) translatez(-200px);    
  }