How to create: Image overlay title
- Previous Page Image Overlay Zoom
- Next Page Image Overlay Icon
Learn how to create an image overlay title on mouse hover.
Image overlay title
Hover over the image to view the overlay effect.

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; }
Related pages
Tutorial:CSS Image
- Previous Page Image Overlay Zoom
- Next Page Image Overlay Icon