Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Image Overlay Hover Slide Effects with CSS
The image overlay slide effect is hidden when the page loads and is visible when the mouse cursor is hovered on the image. The ease-in-outtransition effect is set using the transition property to make the overlay slide effect possible. Let us see how to create an image overlay hover slide effect with HTML and CSS.
Set the card container
A parent div is set for the card text, image, and caption −
<div class="card-container">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
<div class="overlay">
<div class="caption">Tree</div>
</div>
</div>
Position the card container
The card container is positioned relative using the position property −
.card-container {
position: relative;
width: 50%;
}
Overlay effect
The transition is set to the ease-in-out effect with the transition property for the overlay. The position of the overlay is set to absolute −
.overlay {
position: absolute;
bottom: 100%;
background-color: rgb(55, 74, 179);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease-in-out;
}
The caption
The caption visible when the mouse is hovered on the container is placed using the absolute position −
.caption {
color: white;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
}
Example
The following is the code to create image overlay hover slide effects with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
.card-container {
position: relative;
width: 50%;
}
img {
display: block;
width: 100%;
}
.overlay {
position: absolute;
bottom: 100%;
background-color: rgb(55, 74, 179);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease-in-out;
}
.card-container:hover .overlay {
bottom: 0;
height: 100%;
}
.caption {
color: white;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
}
</style>
</head>
<body>
<h1>Image Overlay Slide Example</h1>
<div class="card-container">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
<div class="overlay">
<div class="caption">Tree</div>
</div>
</div>
</body>
</html>
944 Views
