How to use CSS Keyframes In CSS
In this approach, we are using CSS Keyframes to perform an image overlay slide-to-top effect on hover. The .image-overlay div initially has a height of 0 and smoothly animates to 100% height 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 top 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;
top: 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: slideFromTop 0.5s ease forwards;
}
@keyframes slideFromTop {
0% {
height: 0;
top: 100%;
}
100% {
height: 100%;
top: 0;
}
}
.image {
width: 100%;
height: auto;
display: block;
}
h1 {
color: #008000;
text-align: center;
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>Using CSS Keyframes</h3>
<div class="image-container">
<img class="image"
src=
"https://media.w3wiki.org/img-practice/banner/complete-interview-preparation-mobile.png?v=19395"
alt="Sample Image">
<div class="image-overlay">
<img class="image"
src=
"https://media.w3wiki.org/wp-content/uploads/20190802021607/geeks14.png"
alt="Overlay Image">
</div>
</div>
</body>
</html>
Output:
How to Create an Image Overlay Slide to Top 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.
Below are the approaches to create an image overlay slide-to-top effect on hover using CSS:
Table of Content
- Using CSS Transition
- Using CSS Keyframes