Example of advanced image hover effects with pure CSS

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      figure.image {
        position: relative;
        overflow: hidden;
        margin: 10px;
        min-width: 220px;
        max-width: 310px;
        max-height: 220px;
        width: 100%;
        background: #000000;
        color: #eeeeee;
        text-align: center;
      }
      figure.image * {
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
      figure.image img {
        max-width: 100%;
        position: relative;
        opacity: 0.6;
      }
      figure.image h3 {
        position: absolute;
        left: 50px;
        right: 50px;
        display: inline-block;
        background: #000;
        -webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        -moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        -ms-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        -o-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        padding: 15px 5px;
        margin: 0;
        top: 50%;
        text-transform: uppercase;
        font-weight: 400;
      }
      figure.image:before {
        height: 130%;
        width: 130%;
        top: 0;
        left: 0;
        content: '';
        background: #cccccc;
        position: absolute;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        -webkit-transform: rotate(110deg) translateY(-50%);
        -moz-transform: rotate(110deg) translateY(-50%);
        -ms-transform: rotate(110deg) translateY(-50%);
        -o-transform: rotate(110deg) translateY(-50%);
        transform: rotate(110deg) translateY(-50%);
      }
      figure.image:hover img,
      figure.image.hover img {
        opacity: 1;
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
      }
      figure.image:hover h3,
      figure.image.hover h3 {
        -moz-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
        -ms-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
        -o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
        transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
      }
      figure.image:hover:before,
      figure.image.hover:before {
        -moz-transform: rotate(110deg) translateY(-150%);
        -ms-transform: rotate(110deg) translateY(-150%);
        -o-transform: rotate(110deg) translateY(-150%);
        transform: rotate(110deg) translateY(-150%);
      }
    </style>
  </head>
  <body>
    <h2>Advanced hover effect</h2>
    <figure class="image">
      <img src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" width="310" height="220" alt="Example image" />
      <figcaption>
        <h3>W3docs</h3>
      </figcaption>
    </figure>
  </body>
</html>