How To Create An Image Scroll on Hover With Elementor

Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on pinterest
Share on email
QuestionsHow To Create An Image Scroll on Hover With Elementor
J
John
asked 2 years 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.

5 Answers
Adam @ WPCrafter Staff answered 2 years 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 2 years 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.

J
Jannes de Goochelaar
answered 2 years 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!!)

Jannes

Medieval Magician
Holland

0
Felix
answered 8 months ago

Tried this several times… didn't work. Have you been able to test it?
Can you give working example?
Thanks in advance

0
Christian Ek
answered 7 months ago

Would also like to know how to make this work. Tried the guid from Adam but no success…

HAve you had any more luck with it Felix?