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 <span class="property"> XFI4 </span> 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 <span class="property"> XFI5 </span> tag.

How to create img with figure and figcaption elements?

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

Add CSS

Style the image by setting its max-width, min-width and max-height. Set the position to "relative" and the overflow to "hidden". Add the text-align property with its "center" value.
Add the transition of the "image" class. We use the * (asterisk) selector that selects all the elements in a document.
Set the <span class="property">max-width</span> of the image to 100%. Also, specify the position and opacity.
Style the <h3> element by setting its background and <span class="property">position</span> and specifying the transform property. Set the text-transform to "uppercase" to make all characters of each word uppercase and define the font-weight.
Style the :before pseudo-element. Set the height and width of the element and define the color. Specify the <span class="property">transition</span> and <span class="property">transform</span> properties and then, use the :hover pseudo-class.

How to add transform and opacity properties to the hover selector?

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%);
  -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%);
  -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%);
  -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%);
  -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:

Example of advanced image hover effects with pure CSS

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

Try it Yourself »

Result:

<div class="demo"> <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> </div>

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

Example of advanced image hover effects with only CSS

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

Try it Yourself »