How to Create an Image Overlay Slide to Bottom Effect on Hover ?
Image Overlay Sliding effect in CSS is a user interactive component triggered when the users hover the image and a smooth sliding overlay effect occurs in the application.
These are the following approaches:
Table of Content
- Using CSS Transition
- Using CSS Keyframes
Using CSS Transition
In this approach, we are using CSS Transition to create an image overlay slide-to-bottom effect on hover. The .image-overlay div initially has a bottom of 100 and transitions smoothly to 0 height with a color change when the parent .image-container is hovered, which creates a sliding overlay effect.
Example: The below example uses CSS Transition to create an Image Overlay slide to-bottom effect on hover.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
overflow: hidden;
width: 50%;
margin: auto;
}
.image-overlay {
text-align: center;
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: green;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.image-container:hover .image-overlay {
color: aliceblue;
bottom: 0;
height: 100%;
}
.image {
width: 100%;
height: auto;
display: block;
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<h3>Using CSS Transition</h3>
<div class="image-container">
<img class="image"
src=
"https://media.w3wiki.net/wp-content/uploads/20240316132055/img1.webp">
<div class="image-overlay">
Hello w3wiki
</div>
</div>
</body>
</html>
Output:
Using CSS Keyframes
In this approach, we are using CSS Keyframes to perform an image overlay slide-to-bottom effect on hover. The .image-overlay div initially has a bottom of 100% and smoothly animates to 0 with a sliding motion, triggered by the hover event on the parent .image-container.
Example: The below example uses CSS Keyframes to create an Image Overlay slide-to-bottom effect on hover.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
overflow: hidden;
width: 50%;
margin: auto;
}
.image-overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: green;
overflow: hidden;
width: 100%;
height: 0;
transition: height 0.5s ease;
}
.image-container:hover .image-overlay {
animation: slideFromBottom 0.5s ease forwards;
}
@keyframes slideFromBottom {
0% {
height: 0;
bottom: 100%;
}
100% {
height: 100%;
bottom: 0;
}
}
.image {
width: 100%;
height: auto;
display: block;
}
h1 {
color: #008000;
text-align: center;
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<h3>Using CSS Keyframes</h3>
<div class="image-container">
<img class="image"
src=
"https://media.w3wiki.net/wp-content/uploads/20240316132219/img2.png">
<div class="image-overlay">
<img class="image"
src=
"https://media.w3wiki.net/wp-content/uploads/20190802021607/Beginner14.png"
alt="Overlay Image">
</div>
</div>
</body>
</html>
Output: