How To Create An Image Scroll on Hover With Elementor

QuestionsHow To Create An Image Scroll on Hover With Elementor
John asked 1 year 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.

6 Answers
Adam @ WPCrafter Staff answered 1 year 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 1 year 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 1 year 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

Felix answered 5 months ago

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

Christian Ek answered 4 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?

имран answered 4 months ago

Hello how to make an accordion when you hover the mouse opened Elementor pro.

Your Answer
16 + 7 =

Accepted file types: png, jpg, pdf

Add another file