How to create: Image overlay title

Learn how to create an image overlay title on mouse hover.

Image overlay title

Hover over the image to view the overlay effect.

Avatar
My Name is Bill

Try it yourself

How to create an overlay image title

Step 1 - Add HTML:

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">My Name is John</div>
</div>

Step 2 - Add CSS:

* {box-sizing: border-box}
/* Container that needs to be placed over the overlay. Adjust width as needed */
.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}
/* Make the image responsive */
.image {
  display: block;
  width: 100%;
  height: auto;
}
/* Overlay effect - positioned over the container and image */
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}
/* Fade in overlay title when mouse is hovered over the container */
.container:hover .overlay {
  opacity: 1;
}

Try it yourself

Related pages

Tutorial:CSS Image

Tutorial:How to Create Image Overlay Hover Effect