(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Tutorial Video:
Don’t want to make from scratch? Get the template instead 🙂
Introduction – Image Hover Effect with Elementor and CSS
In this tutorial, we will create a simple hover effect where, on hover, the image expands and reveals itself.
OUR SERVICES
A sleek, conversion-focused landing page for a fast-growing SaaS startup. We crafted a dynamic UI with bold typography and subtle animations, all optimized for speed and user engagement.
WEB DEVELOPMENT
MARKETING
WEB DESIGN
SEO PACKAGE
DMMOTIONARTS 🙂
Image List Hover Effect Code
- dm-hover-list is the CSS class of the container that contains the image and text.
- dm-hover-list-img is the CSS class of the image inside the container that needs to be expanded.
- width:150px, this controls the width of the image on hover.
<style>
.dm-hover-list-img {
transition: width 0.5s !important;
width: 0px;
}
/*Desktop*/
.dm-hover-list:hover .dm-hover-list-img {
width: 150px;
}
/*Tablet*/
@media(max-width:1024px) {
.dm-hover-list:hover .dm-hover-list-img {
width: 150px;
}
}
/*Mobile*/
@media(max-width:767px) {
.dm-hover-list:hover .dm-hover-list-img {
width: 150px;
}
}
</style>
