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.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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.
<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 max-width of the image to 100%. Also, specify the position and opacity.
  • Style the <h3> element by setting its background and position 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 transition and transform properties and then, use the :hover pseudo-class.

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:

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

Example image

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>