How to create hover-over effect for magnifying images on pages?

Please help. I’ve read other solutions that haven’t been useful. I can’t believe this isn’t an option within webflow.


Here is my public share link: http://interludeculture.com/featured-artist/pureray

1 Like

Hello @Morrison_Machiavelli

What kind of hover effect? You can create many things on hover. Complex and simple.

Piter :webflow_heart:

Magnifying an image, sorry if that wasn’t clear, and thanks!

Take a look at JQuery Zoom. It’s used all over the web.

http://www.jacklmoore.com/zoom/

I don’t understand though. Do I paste the info into the header for it to effect the images and then create div containers with embed boxes? Where do I make the images. This seems like it translates it easily for websites, but it’s not helping me with webflow.

1 Like

You probably would need the help of a developer if you are unfamiliar with JavaScript.

You might want to consider using the CMS or E-commerce so you can send the user on a click to the detail page, where you could display a larger image with a lightbox for example. Look at gallery examples in webflow. It is a similar concept.

Actually I’m trying something only with Webflow. Not sure how this can work with cms ect.

Live > https://image-zoom-test.webflow.io/

Clone and explore > Image zoom effect - Webflow

Only 10 min. build time so I think that maybe there’s a better way to structure the elements.

3 Likes

I think this should work with cms just fine, why not? Both main image and hover image will be pulled from one or another cms field (or even from two different, the hover bein full res)

1 Like

Not paying the extra for CMS, gets pretty expensive for me at that point considering this is a side project.

1 Like

You don’t have to pay for cms if you do not need it. Piter thought you will use it in your ecommerce site, which uses cms of course. If you need it for some other reason you can totally use it as it is.

This is great but seems like a lot of work for such a simple issue. Doing this with 50 images would be a nightmare.

1 Like

I think that you can use a class targeting for the interaction.

1 Like

So once one is setup I should just be able to setup a class! That’s brilliant! I’ll follow up with this tomorrow and thanks!

1 Like

Absolutely! Check this > Reuse interactions | Webflow University

Piter :webflow_heart:

Hey Piter, thanks for sharing this link. I’m looking to build exactly what it’s demonstrated in the article, when the cursor turned into a magnifying glass. The tutorial though is on a completely different matter. Where can i find a tutorial please ? I’ve been looking all morning.