How To Scroll Long Images On Hover in Elementor: The Easiest Way

As website developers, we're constantly in search of the next big thing. We want the latest trend to fuel our efforts and provide us with a competitive edge over other developers. One such trend is scrolling long images on hover. In this article, I'll teach you how to scroll long images on hover in Elementor using Custom CSS in Elementor. Scrolling long images using CSS is also one of the fastest ways to create an amazing Portfolio showcase.

The newest trend in website design is scrolling long images on hover for a portfolio. This allows the visitor to see more of the image and provides a better user experience. The easiest way to implement this kind of interaction is by using Custom CSS in Elementor. Let's start off by going ahead and creating a new Elementor page for your site.

How To Scroll Long Images On Hover in Elementor

Step 1: Create a new page or edit the page where you want to add the portfolio section.

Step 2: Click the plus icon and two inner sections.

Step 3: Add an inner section in each section of the inner sections.

Step 4: Now drag and drop the image widget to both of the inner sections.

Step 5: Now add your full website images to both of the images placeholders.

Step 6: Now go to the advanced tab and in the CSS classes, add an attribute. for example, "wpc-img".

Do the above for both images.

CSS To Scroll Long Images On Hover in Elementor

Step 7: After we added a CSS attribute to both of the images, we will add Custom CSS.

Now, in the advanced tab move down to the Custom CSS field.

In that field, add the following CSS to it.

  .wpc-img {     width: 100%;     height: 200px;     overflow: hidden;     margin: 0 auto;     display: inline-block;     position: relative;     cursor: pointer;    }    .wpc-img:hover img {     animation: moveSlideshow 3s linear;animation-fill-mode: forwards;    }    @keyframes moveSlideshow {     100% {      transform: translateY(calc(-100% + 200px));     }    }    @keyframes fadeSlideshow {     0% {      opacity: 0;    }

Your portfolio section is ready. Now let's go ahead and see what exactly we did here.

The .wpc-img class has the following CSS properties which are used for scrolling long images on hover in Elementor.

The width is set to 100% so that it occupies the full width of the section.

The next property, height is set to 200px which means that when you hover on the image, only the part inside these dimensions will be displayed.

We also added overflow: hidden; which acts as a clip for our images and keeps them visible only between 0-200px.

The next property, margin: 0 auto; is used to center the images horizontally.

The last thing we did was set display: inline-block; which will make both of our images act like buttons and give that hover effect on hover in Elementor.

The Custom CSS for .wpc-img contains some more properties like cursor: pointer; which is used to set the cursor style to pointer when you hover on the image so that it looks nice.

The animation property is used for adding an animation effect when scrolling long images on hover in Elementor.

Here, we've added 3s so the transition time will be three seconds and also mentioned that since we want this to take place on hover, we need to use the animation-fill-mode: forwards; .

All other CSS properties are used for positioning the images.

I hope you've understood how to scroll long images on hover in Elementor by using Custom CSS. If you have any queries, feel free to ask me in the comments section below.

Why Scroll Long Images On Hover in Elementor?

Here are some of the reasons why you should use scrolling long images on hover in Elementor.

Scroll long images on hover help present your portfolio in a more visually appealing way.

The scrolling animation helps engage users and makes it easier for them to navigate between different designs easily.

Scrolling long images on hover can be used as an effective design idea to grab the attention of your audience and better communicate what you have to offer.

You're done!

Conclusion

I hope this article has helped you to scroll long images on hover in Elementor. If you want us to write more tutorials like scrolling long images on hover in Elementor or if you have any queries, feel free to ask me in the comments section below.

Thanks for reading! Do comment.