Advanced Image Hover Effects with pure CSS

The most common function of hover effects is to highlight text links or buttons. But they have more functions.

Hover effects add an element of interactivity to a website. They have powerful effects when applied to the images. They can also have a great impact on the user thus making your website well-designed.

Hover is an effect that occurs while you place the mouse cursor over an object. It is mostly used for styling and usability.

In this tutorial, we’ll show you how to create 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

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

Let’s see another example of a three dimensional transform:

Example

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