Streaming live at 10am (PST)

Layering (Four Images) Elements for Animation


#1

Hi there!

I'm trying to create an animation in which three different colors (three layers) of our logo shoot in from the right and left sides of the page once the website loads, moving behind the main black logo once the animation is over.

I'm wondering how to layer these elements, as duplicating them just makes the logos go side by side, or one on top of the other. Right now the logo element is an "image" - I'm not sure if I need to delete this and re-create it as a new element in order to layer the four. (div perhaps?)

Thank you!!


#2

It is time to master absolute positioning :wink:

By using position:absolute on each layer, and by giving the reference parent position:relative, you can superpose your elements and order them using z-index.

Learn all about it here:


#3

Sweet!

I've just set my two logos to an absolute position, and ordered them via the z-index - but once I checked the logos out on the other screens other than a desktop, they were all fudged up! Why do you think this is? Sigh.

Thank you


#4

Do you mind sharing your site's read-only link?

1 - On your site's dashboard click the Share icon:

2 - Generate or Copy the link:

3 - Then edit your post here and paste it inside.


#5

https://preview.webflow.com/preview/blurred-6c2a09?preview=f506d84d61127f1237c0bb04855e2102

Here you go!


#6

Your container should be relative, from there it should be easier ton control the logo


#7