Hover over slider image to view enlarged zoom

Design help General
1

Hi,
I want to incorporate a zoom feature when the viewer hovers over an image in the slider on my Photography Template page. On the hover, the location of the cursor on the image will designate where the center of the zoomed-in (200-400%) image will be. Move the cursor, the zoomed in image moves. The zoomed-in image will appear on the right 50% of the page, taking up 100vh and 100% width of the right column. The right column image would ONLY show when you hover over the left side slider. Keep in mind that this is a slider and ideally would be able to function using the CMS defining the elements of the sliders. And so, based on which slider page you are on, will change the image on the right.

Here are some Images of what I am thinking to make it easier:

27%20PM
27%20PM2094×1308 340 KB
33%20PM
33%20PM2096×1308 367 KB
40%20PM
40%20PM2096×1310 345 KB

Thanks all!

Here is my site Read-Only: https://preview.webflow.com/preview/cleansite1-0?utm_source=cleansite1-0&preview=a1c646950d8a9fe117bbc021fa12b52a

2

While this may be doable in Webflow, the fact that you want it inside a slider, fed by cms content and have this zoom feature is just begging for everything to not work.

I’d suggest researching 3rd party embeds with custom code to make this type of thing work. A simple image zoom might be possible but what you are asking for is probably a bad idea to attempt in Webflow if you want a stable site.