Example of advanced image hover effects with only CSS

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 250px;
        height: 250px;
        margin: 20px auto 40px auto;
        perspective: 1000px;
      }
      .example a {
        display: block;
        width: 100%;
        height: 100%;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-size: cover;
        transform-style: preserve-3d;
        -webkit-transform: rotateX(80deg);
        -moz-transform: rotateX(80deg);
        -ms-transform: rotateX(80deg);
        -o-transform: rotateX(80deg);
        transform: rotateX(80deg);
        -webkit-transition: all 0.8s;
        -moz-transition: all 0.8s;
        -o-transition: all 0.8s;
        transition: all 0.8s;
      }
      .example:hover a {
        -webkit-transform: rotateX(10deg);
        -moz-transform: rotateX(10deg);
        -ms-transform: rotateX(10deg);
        -o-transform: rotateX(10deg);
        transform: rotateX(10deg);
      }
      .example a:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        background: #cccccc;
        -webkit-transform: rotateX(60deg);
        -moz-transform: rotateX(60deg);
        -ms-transform: rotateX(60deg);
        -o-transform: rotateX(60deg);
        transform: rotateX(60deg);
        transform-origin: bottom;
      }
    </style>
  </head>
  <body>
    <h2>Advanced hover effect</h2>
    <div class="example">
      <a href="#"></a>
    </div>
  </body>
</html>