Streaming live at 10am (PST)

How do I create this arrow effect?


#1

Hi

I wonder if I could get some assistance please?

I want to recreate this down arrow in circle effect on my hero section. Please see screenshot - the red arrow points to the arrow I'm talking about.

I have the arrow circle image, but don't know how to set it so it half overlaps the hero section and the section beneath it. I'd much appreciate any help, many thanks.

Cheers...Graham


#2

Set the parent element to position:relative and then apply position:absolute to the circle image. Then set it to the bottom of the page and center it (margin-left:auto, margin-right:Auto). Then use the transform tool to move it down to where you want it to be.

Remember to always put in a preview share link when you ask for assistance on the forums! It makes things much easier!


#3

I agree with @Hamzster but, best to use the position tool to move it down where you want it to be - not the transform tool as transform has poor compatibility with some web browsers - so avoid if not needed.


#4

Hi guys,

Many thanks for such quick responses, that's much appreciated.

My apologies, I meant to post my share link, here it is fyi:
https://webflow.com/design/mortgagebrokerglasgow?preview=b77e02461764e4a87823833ad1f3bf0a

I'll follow your instructions and let you know how I get on.

Many thanks.

Graham


#5

Hi guys,

A quick Q please:

The parent element is the HeroSection, ie the whole of the section that contains the background image of glasgow and everything else on it. It's current position is set to auto (static). Is it ok to set that to position relative? I'm worried it's going to mess the layout up.

Many thanks again for your help,

Graham


#6

Yes it's OK. It's even mandatory. The rule is:

"An element is positioned relatively to its closest positioned parent." So you have to set the reference element to position:relative.

Passing an element from auto to relative isn't going to produce any mess/change (unless you add some position values).


#7

Hi Vincent

Thank you for taking the time and trouble to explain that so clearly to me! All understood. I'll implement now and let you know how I get on.

Cheers...Graham


#8