Advanced Image Hover Effects 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. Hover effects have powerful effects when applied to images.

Hover is an effect that occurs while you place the mouse cursor over an 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.

1. Create HTML

  • Add <figure> tag with a class "image". The <figure> tag is used for indicating self-contained content.
  • 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" />
  <figcaption>
    <h3>W3docs</h3>
  </figcaption>
</figure>

2. Add CSS

  • Set the max-width, min-width and max-height of the image.
  • Set the position to relative, so as the element is relative from its normal position.
  • Set the overflow to hidden, so as the content be clipped to fit the padding box.
  • Set the color of figcaption and the alignment of the text.
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;
}
  • Add the transition of the image class. We use the * (asterisk) selector that selects all elements in a document.
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;
}
  • Set the max-width of the image to 100%.
  • Set the level of transparency of an element.
figure.image img {
max-width: 100%;
position: relative;
opacity: 0.6;
}

Our next step is to add style to the h3.

  • Set the background and the position of the h3.
  • Specify the transform property. It defines the 2D or 3D transformation of the element. It allows to rotate, scale, skew or translate the element.
  • Set the text-transform to uppercase, so as to make all characters of each word uppercase.
  • Define the font-weight. Here, we set it to 400.
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;
}

Now let’s set a style to :before pseudo-element which is a generated content element that adds any element before the content.

  • Set the height and width of the element and define the color.
  • Specify the transition setting the transition-duration to 0.3.
  • Specify the transform property. Rotate the element by 110 degrees and translate the element along the y-axis by -50%.
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%);
}

The next step is to set the hover effect to our image, h3, and :before.

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" alt="W3docs"/>
    <figcaption>
      <h3>W3docs</h3>
    </figcaption>
  </body>
</html>

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