How TO - Image Overlay Title
Learn how to create an image overlay title on hover.
Image Overlay Title
Hover over the image to see the overlay effect.
My Name is John
How To Create an Overlay Image Title
Step 1) Add HTML:
Example
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">My Name is John</div>
</div>
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">My Name is John</div>
</div>
Step 2) Add CSS:
Example
* {box-sizing: border-box}
/* Container needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width: 50%;
max-width: 300px;
}
/* Make the image to responsive */
.image {
display: block;
width: 100%;
height: auto;
}
/* The overlay effect - lays on top of the container and over the 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;
}
/* When you mouse over the container, fade in the overlay title */
.container:hover .overlay {
opacity: 1;
}
Try it Yourself »/* Container needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width: 50%;
max-width: 300px;
}
/* Make the image to responsive */
.image {
display: block;
width: 100%;
height: auto;
}
/* The overlay effect - lays on top of the container and over the 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;
}
/* When you mouse over the container, fade in the overlay title */
.container:hover .overlay {
opacity: 1;
}
Tip: Also see other image overlay effects (fade, slide, etc) in ourHow To - Image Hover Overlay.
Go to ourCSS Images Tutorial to learn more about how to style images.
