QuestionsHow To Create An Image Scroll on Hover With Elementor
John asked 12 months ago

Hi Adam!

I'd like to know how we can make an image scroll down on mouse hover. This is something we usually see on premium theme demo images on themeforest.

I came across an article on Elegant Themes on this topic and tried to used it with Elementor Pro,but it didn't work for me.

It'll be great if you can also create a tutorial on this. I'm sure there'll be many others looking for this.

Thanks in advance.

3 Answers
Adam @ WPCrafter Staff answered 12 months ago

The way you would do it is different depending on if you have Elementor Pro or just Elementor. Elementor Pro allows you to add custom CSS in a module.

Then add this to your CSS, customizer > additional CSS

.image-scroll:hover {
	background-position: bottom center!important;
	transition: background-position 5s linear 0s;

Next add an image element > choose your image > click on the advanced tab > enter the following code

selector {
	margin-left: auto!important;
	margin-right: auto!important;
	transition: background-position 1.5s ease-out 0.5s;
	background-position: top center;
	background-size: 100% auto!important;
	height: 100%;
	background-repeat: no-repeat;

Then for the ID enter image-scroll:hover

That should do it. I will have to test it though.

Stratos Karavarakis answered 12 months ago

Hi Adam. I haven't tested what you wrote but I think that the id needs # in CSS so the image-scroll should be entered in class.

Jannes de Goochelaar answered 11 months ago

Interesting! sounds as something I want to use also…

I'm a magician and I want on my homepage some cups (cups and balls) and when you hover over a cup it has to lift up and reveal the item under it. (I don't like animation but here it has a nice purpose)

I do have Elementor Pro (to all: buy this via Adam!)  but don't understand exactly what to do… (have tried a couple of things, I did some simple things with html in the past but this is too complicate I think 🙂

BTW: I make my pages via Elementor canvas and don't use themes as I want to design my own site

Thanks a lot Adam! (have studied all your Elementor video's, Great!!)


Medieval Magician

Your Answer
15 + 12 =

Accepted file types: png, jpg, pdf

Add another file