Community forum for knowledge and support

Updated last year

A hero section with a zoom effect

At a glance

The community member has just landed their first client and is trying to create a hero section similar to the one on the website https://www.ubbs.uk/. The main issue they are facing is the zoom effect for each slide (Tab). They have tried adding an interaction of scale, but this caused the image to go off the screen, resulting in horizontal scrolling, which is not desirable.

In the comments, another community member congratulates the original poster on their first client and suggests setting overflow:hidden on the section and adding an image-wrapper div to address the issue with the zoom effect. The commenter mentions they had a similar problem and adding the wrapper seemed to make a difference, although they are unsure why.

Useful resources

Hi everyone! I just got my first client πŸ™‚ and I'm trying to create a hero section similar to the one here: https://www.ubbs.uk/. The main thing I need help with is the zoom effect for each slide (Tab). This is what I have done so far: https://kingfisher-c0c3fa.webflow.io/. I have tried to add an interaction of scale, but when I do that, the image goes off the screen, and then you can scroll horizontally, which is a bad look.

E
1 comment

Hey, congrats on your first client! It's tough out here so well done

Re: the animation, I think you want to set overflow:hidden on the section, and also try adding an image-wrapper div. I had a similar problem yesterday and adding the wrapper seemed to make a difference, although I'm unsure why haha

Add a reply
Sign up and join the conversation on Slack