How to Create an Image Overlay Title on Hover

In this tutorial, we will learn how to create an image overlay title that appears when the mouse hovers over the image.

This technique is commonly used in modern websites to show additional information or details about a particular image.

We will explore how to create this effect using CSS and HTML.

HTML Markup

The HTML code for the image overlay is straightforward and consists of a div container that contains the image and a span element for the overlay title.

The span element is positioned absolute so that it can be positioned over the image.

<div class="img-container">
  <img src="image.jpg" alt="Image">
  <span class="img-overlay">Image Title</span>
</div>

CSS Styles

The CSS styles are what make the overlay title appear on hover. The styles include the following:

Setting the position of the div container to relative, so that the span element can be positioned absolutely within the container.
Hiding the span element by setting its opacity to 0.
Displaying the span element on hover by setting its opacity to 1.

.img-container {
  position: relative;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
}

.img-container:hover .img-overlay {
  opacity: 1;
}