Background photo zoom-in effect

Design help General
1

Hi,

anyone knows how to get this effect - background image zoom-in on hover or on time triger?

like in this case, background image zoom.in when you hover button.

2

Hi,

I have done this with an interaction.

Click the item that you want to trigger the zoom, create an interaction that has a hover trigger and scale the image to and enlarged size. See the screen shot below with the div selected on the left hand side, on the right see the interaction settings.

You should be able to select the div with the background image in it when you check the “Affect different element(s)” box.

1920×1160 1.9 MB

Hope that helps,

John

2 Likes
3

Hey John,
Thanks for the advice! On a similar issue I’d like to ask…
How can I make a background photo which is larger than the screen and can be explored with movement of the mouse? I’d like to take a big map, turn it big on a click, like you explained and then let the user hover left and right in order to reveal more of the map. When he moves to the left, the map moves in the opposite direction, therefore revealing the left part of the map. No horizontal scrolling if possible. Can I do this in Webflow?
Thanks, Lupo

4

@LupoAsaf, that is an interesting kind of page :slight_smile: what is the size of the image you will be wanting to zoom and scroll with?

Cheers,
Dave

5

2400x2400 pixels. It’s an effect you often see in fashion or other e-commerce sites. I just want to do it on the whole screen.

6

Hi @LupoAsaf, So am I right in saying, you want to Zoom the image and then pan across it ? Cheers,
Dave

7

Yes.
I prefer not using a scroll but a motion which is a result of a hover. Like you see here in amazon, but with the enlarged image covering the whole screen.

8

Hi @LupoAsaf, ok thanks for the clarification. Yeah we do not have that as a built in widget yet, and this probably require some javascript coding.

You might look for a background photo zoom jquery plugin, and add that to your site using custom code: Custom code in head and body tags | Webflow University.

Cheers,
Dave

9

Hi cyberdave – I am trying to create what you mentioned above " you want to Zoom the image and then pan across it ? ". How could I do that in webflow?

Also, when you pan across, I would like the elements to be clickable. Is that possible?

Greatly appreciate your feedback!

Ananya