Transform Your Images with Elementor: Scroll on Hover Effects Unleashed!

by | Jun 7, 2024 | Elementor Page Builder, Web Design, Wordpress

https://youtu.be/2gczy7G-fks?si=HwVtfEXwv3YOGgt4

Transform Your Images with Elementor: Scroll on Hover Effects Unleashed!

Hi everyone! Welcome to another Elementor tutorial. This is Jamie from System22 and WebDesignDetectives.com. Today, we’ve got an exciting and highly requested tutorial for you. We’re going to show you how to create a scrolling image effect on hover using Elementor. This effect is fantastic for grabbing attention and adding some dynamic flair to your site.

Before diving into the steps, let’s discuss why you might want to use scrolling images on your website. Scrolling images add a dynamic and interactive element to your site, making it more engaging for visitors. Scrolling images are eye-catching and can draw attention to important content or messages on your site. Interactive elements like scrolling images can make your site more enjoyable to navigate, improving overall user experience. You can use scrolling images to highlight special offers, key products, or important information that you want visitors to notice. Adding movement to your images can make your site look more modern and sophisticated.

Now, let’s get started with the tutorial. We will walk you through the process step-by-step, ensuring you can easily replicate the effect on your site.

First, open your Elementor page editor. We’ll start by adding a new section to your page. Click the “+” icon to add a new section and choose a three-column layout to begin with. You can adjust the number of columns later based on your needs. Next, we need to add the images that will have the scrolling effect. Drag an Image widget from the Elementor panel into each column and select your images. For the best effect, choose long images that can showcase the scrolling feature.

The magic of the scrolling effect happens with custom CSS. Let’s add the necessary CSS to make the images scroll when hovered over. Click on the column’s edit icon (gray icon) to open the settings. Add some padding to the section for better spacing. I recommend 50 pixels all around to give your images some breathing room. Navigate to the Advanced tab in the column settings. In the Custom CSS section, enter the appropriate CSS code.

To apply the CSS class to your columns, follow these steps: Click on the column settings icon. Under the CSS Classes field, enter the class name. Repeat this process for each column that contains an image.

Now that we’ve applied the CSS, let’s fine-tune and test the effect to ensure it works as expected. Use the Navigator (icon on the bottom left) to easily copy and paste the image widgets into the other columns. Right-click on the image widget and select “Copy.” Then, right-click in the next column and select “Paste.” Replace the images in the duplicated columns to suit your design needs. Click on each image widget to open the settings and choose a new image. Save your changes by clicking the “Update” button. Use the preview (eyeball icon) to see the effect in action. Hover over each image to ensure the scrolling effect is working correctly.

To ensure everything works seamlessly, here are a few more steps and best practices to keep in mind. Ensure your images are of high quality and optimized for web use. This helps in maintaining the aesthetic appeal and performance of your site. You can adjust the height in the CSS code to better fit your design. For example, change the height value based on your image dimensions and layout needs. Test your design on mobile devices. Ensure the scrolling effect works well and the images look good on smaller screens. You may need to make adjustments in the mobile settings of Elementor. If you’re using the free version of Elementor or a different theme, you can add the custom CSS in the Additional CSS panel: Go to your WordPress dashboard. Navigate to Appearance > Customize > Additional CSS. Paste the custom CSS code there.

If you want to take this effect to the next level, consider some advanced customizations. You can make the images scroll in different directions by adjusting the CSS. To scroll from top to bottom, change the margin-top values accordingly. Adjust the speed and easing of the scroll effect to make it smoother or faster. Modify the transition property in the CSS. Combine the scrolling effect with other CSS animations for a more dynamic result. For example, add a slight zoom effect on hover.

And there you have it! A sleek scrolling image effect using Elementor. This eye-catching effect is perfect for making your images stand out and engaging your visitors. If you enjoyed this tutorial, please like, share, and subscribe. For more tutorials and tips, check out our Simple CSS playlist. Thanks for watching, and happy designing!

As you work on implementing this effect, you might encounter a few challenges. Here are some common issues and how to address them. Ensure you’ve applied the CSS class correctly. Double-check that you’ve added the class name to the CSS Classes field in the column settings. Verify that the custom CSS code is correct and placed in the appropriate sections. If the scroll effect jumps instead of having a smooth scroll, this could be due to the transition duration. Make sure the transition property is correctly set in the CSS. Check your responsive settings in Elementor. You may need to adjust the CSS or the column layout for smaller screens. Test on multiple devices to ensure the effect works well across different screen sizes. If you want the CSS to apply site-wide, ensure it’s added to the Additional CSS panel in your theme’s customizer.

Beyond just adding a cool effect, consider how scrolling images can enhance the user experience on your site. Use scrolling images to tell a visual story. This could be a sequence of events, a product showcase, or a visual journey that engages your audience. Direct users’ attention to important sections of your site. Use scrolling images as visual cues to guide users through your content. Create interactive image galleries with scrolling effects. This can be especially effective for portfolios, product showcases, or any content that benefits from visual interaction. Integrate scrolling images with other interactive elements like buttons, links, or popups to create a more engaging user experience.

Creating a scrolling image effect on hover with Elementor is a powerful way to enhance the visual appeal and interactivity of your website. By following the steps outlined in this tutorial, you can easily implement this effect and customize it to suit your design needs.

Remember, the key to a great website is not just in the effects and animations but in how they enhance the overall user experience. Use scrolling images strategically to draw attention, tell stories, and engage your visitors.

We hope you found this tutorial helpful. If you have any questions or run into any issues, feel free to leave a comment below. And if you enjoyed this tutorial, please like, share, and subscribe for more tips and tutorials.

Once again, this is Jamie from System22 and WebDesignDetectives.com. Thanks for watching, and happy designing! Have a fantastic day!

Elementor Ecommerce Shop Site Build: https://www.youtube.com/watch?

v=Sl1Ye9XHhgY&list=PLqabIl8dx2wrrX3YsjpIEL8uq5LnSkrhA

My Elementor Video Playlist : https://www.youtube.com/watch?

v=yN6YlT1Cvqc&list=LLYeyetu9B2QYrHAjJ5umN1Q

Elementor Hover Effects Playlist: https://www.youtube.com/playlist?

list=PLqabIl8dx2wqkGuqlL4RRLwJnBRO47jm2

Get Elementor From Here: https://be.elementor.com/visit/?bta=7653&nci=5528

Check out our playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists

Free Stock Photos

Stock photos are essential when you’re building a website. Of course it’s quite possible to build a website not using any photos or images, but it’s going to be a pretty uninteresting looking site, even if the content is top-notch. Adding images to any website creates an interest factor, attracts the eye and will surely make your visitors more likely to read on and see a little more.

There are a huge number of stock photo sites available out there, and they all have some really fantastic looking images ready for you to insert into your site. But buying these images can get quite expensive especially from some of the more well-known sites like Shutterstock.

Free Stock Photos – Where to get an unlimited supply

Free Stock Photos – Where to get an unlimited supply

Latest YouTube Videos

Have a great website design

It is essential to have a great website design nowadays as so many people tend to shop and find services online. It is also very important to have a responsive website design as almost 50% of today’s browsing is done on smartphones and tablets, I certainly use mine for browsing. If a customer navigates to your site and they have to pinch and zoom to be able to read and navigate, the chances are that they will move away to another site and you will almost certainly lose that customer.

A well-developed website can convey trust and credibility, making people to buy from you, or support you. Whether you are a professional looking for a job, or an expert in your industry: you can show that to the whole world by having a custom responsive website.

Be sure to check out our playlist page to find the help you need!

Subscribe To Our YouTube Channel

4.5 million views on youtube




Test Out The Divi Theme

IT Certification Category (English)300x250

Elementor Page Builder




Pin It on Pinterest

Share This