How to Create an Image Overlay Icon Effect on Hover

An image overlay effect is a popular technique in web design that adds an extra layer of information to an image.

The effect is achieved by displaying text or an icon over the image when the user hovers over it.

In this tutorial, we will learn how to create an image overlay icon effect on hover using HTML, CSS, and JavaScript.

HTML Markup

The first step in creating an image overlay icon effect is to create the HTML markup for the image.

We will use an HTML element to wrap the image and the overlay text. The following is the HTML code for the image:

<figure>
  <img src="image.jpg" alt="Image">
  <figcaption>
    <h3>Image Title</h3>
    <p>Image Description</p>
  </figcaption>
</figure>

CSS Styles

Next, we will add the CSS styles to the HTML markup. The CSS styles will be used to position the overlay text and icon over the image. The following is the CSS code for the image overlay effect:

figure {
  position: relative;
  overflow: hidden;
}

figure img {
  width: 100%;
}

figure figcaption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.35s;
}

figure:hover figcaption {
  opacity: 1;
}

figure figcaption h3 {
  margin: 0;
  font-size: 18px;
}

figure figcaption p {
  margin: 0;
  font-size: 14px;
}

JavaScript

Finally, we will add the JavaScript code to the HTML markup.

The JavaScript code will be used to add the overlay icon to the image.

The following is the JavaScript code for the image overlay icon effect:

const figures = document.querySelectorAll('figure');

figures.forEach(figure => {
const icon = document.createElement('i');
icon.classList.add('fas', 'fa-search-plus');
figure.appendChild(icon);
});