Streaming live at 10am (PST)

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


#1

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


#2

Hello @Morrison_Machiavelli

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

Piter :webflow_heart:


#3

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


#4

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

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


#5

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.


#6

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.


#7

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 > https://webflow.com/website/Image-zoom-effect

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


#8

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)


#9

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


#10

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.


#11

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


#12

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


#13

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!


#14

Absolutely! Check this > https://university.webflow.com/article/reusing-interactions

Piter :webflow_heart: