(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.)
Get Elementor Pro Today –
1 – Elementor Pro
Image Scroll effect with Elementor and CSS
There are two versions available below, first version allows you to scroll longer image with scrollbar and second version simply scrolls the image automatically if you hover on it. For the second version, some extra configuration might require if you change the container height, so watch above video to learn it.
- dm-scroll-image-container is the CSS class of the container that has image in it. You need to add specific height to this container to cut the image to your requirement.
- overflow-y:scroll adds a scrollbar and makes the image scrollable. You can also change scrollbar styling if you want.
- dm-scroll-icon is optional if you wish to have an icon to indicate scrolling.
- For the second version, which is auto-scroll version, change the transform value based on height of the container you have used. (Please refer to video to understand it)
/*Adds Scrollbar to longer images*/
<style>
.dm-scroll-image-container {
overflow-y:scroll;
overflow-x:hidden;
}
.dm-scroll-icon {
transition: opacity 0.3s;
}
.dm-scroll-image-container:hover .dm-scroll-icon {
opacity: 0;
}
</style>
/*Auto Scroll on Hover*/
<style>
.dm-scroll-image-container {
overflow:hidden;
}
/*Desktop CSS*/
.dm-scroll-image-container:hover .dm-scroll-image {
transform: translate(0%, calc(-100% + 550px));
}
/*Tablet CSS*/
@media(max-width:1024px) {
.dm-scroll-image-container:hover .dm-scroll-image {
transform: translate(0%, calc(-100% + 485px));
}
}
/*Mobile CSS*/
@media(max-width:767px) {
.dm-scroll-image-container:hover .dm-scroll-image {
transform: translate(0%, calc(-100% + 195px));
}
}
.dm-scroll-image {
transition:transform 1s;
}
.dm-scroll-icon {
transition: opacity 0.3s;
}
.dm-scroll-image-container:hover .dm-scroll-icon{
opacity: 0;
}
</style>
