Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create an image overlay title on hover with CSS?
The image overlay title on hover is visible on an image when the mouse cursor is hovered. For that, the :hover selector is used. The transition needs to be set for the overlay using the transition property. Let us see how to create an image overload title on hover with HTML and CSS.
Set a container
A container div is set. Within that, set an image for a child div for the overlay −
<div class="card-container"> <img src="https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" > <div class="overlay">Amit</div> </div>
Position the container div
The position of the container div is set to relative −
.card-container {
position: relative;
width: 50%;
}
Style the image
The image height is set to auto and the width to 100% −
.image {
display: block;
width: 100%;
height: auto;
}
Position the overlay
The overlay is positioned using the position property with the value absolute. The transition effect is also set with ease i.e., begins with a slow start, then fast and end slowly −
.overlay {
position: absolute;
bottom: 0;
background: rgba(48, 9, 155, 0.5);
width: 70%;
transition: .5s ease;
opacity:0;
color: rgb(251, 255, 0);
font-size: 25px;
font-weight: bolder;
padding: 20px;
text-align: center;
}
Overlay title on hover
The hover property is set using the :hover selector. On hover, the opacity is set to 1 using the opacity property −
.card-container:hover .overlay {
opacity: 1;
}
Example
The following is the code to create an image overlay title on hover using CSS −
<!DOCTYPE html>
<html>
<head>
<style>
* {box-sizing: border-box;}
.card-container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgba(48, 9, 155, 0.5);
width: 70%;
transition: .5s ease;
opacity:0;
color: rgb(251, 255, 0);
font-size: 25px;
font-weight: bolder;
padding: 20px;
text-align: center;
}
.card-container:hover .overlay {
opacity: 1;
}
</style>
</head>
<body>
<h2>Image Overlay Title Example</h2>
<div class="card-container">
<img src="https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" >
<div class="overlay">Amit</div>
</div>
</body>
</html>
602 Views
