How to Add Advanced Hover Effects to an Image with Pure CSS

In web design, hover effects are widely used because of their easy implementation. They add an element of interactivity to a website and make it well-designed, thus keeping users engaged.

The most common function of hover effects is to highlight text links or buttons. However, they have other functions as well and can have powerful effects when applied to images.

Hover is an effect that occurs when you place the mouse cursor over the object. It is mostly used for styling and usability. Unlike animations that can slow down the work of a website, with CSS hover effects, there won’t be such a problem.

In this tutorial, we’ll show you how to add creative hover effects to your image using only CSS.

Create HTML

  • Add <figure> tag with a class "image". The <figure> tag is used for indicating self-contained content.
  • Use the <img> tag to add an image.
  • Use the <figcaption> tag to include a caption or explanation to the content of the <figure> tag.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <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>

Add CSS

  • Set the max-width, min-width and max-height of the image.
  • Set the position to "relative", so as the element will be relative to its normal position.
  • Set the overflow to "hidden", so as the content will be clipped to fit the padding box.
  • Set the color of <figcaption> and the alignment of the text.
  • Add the transition of the "image" class. We use the * (asterisk) selector that selects all the elements in a document.
  • Set the max-width of the image to 100%. Also, specify the position and opacity.
<!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;
      }
    </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>

Our next step is to add style to the <h3> element.


Now, let’s set a style to the :before pseudo-element.

  • Set the height and width of the element and define the color.
  • Specify the transition and transform properties. Rotate the element by 110 degrees and translate it along the y-axis by -50%.
  • Use the :hover pseudo-class.
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%);
}

Let’s bring together the parts of our code.

Example of adding a hover effect:

<!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>

Result:

W3docs

Example of adding a hover effect to a 3D transformed element:

<!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>

Do you find this helpful?

Related articles