▼
Streaming live at 10am (PST)

Stack two Images

#1

Hi Webflowers,

i want to stack two images.
I created a divblock and put these two images into it. I changed the position of these images to stack them exactly to make them on top of each other. Is there any chance to do that with one click? The images have the exact same size.

Thanks guys!

#2

Hi.

Give the div container the size of the images.
Give the div container Position:relative (has no visual change but it's important)
Give each of the image Position:absolute and click the top left corner.
Images are now stacked. Their position ic calculated relatively to the container because it's positionned too.

#3

It's almost 10 clicks, do you take it? :wink:

#4

I m gonna try it! vincent god bless you.
i had a lot of stress trying that without any effect!

Thanks mate!

#5

Btw Vincent what happens if i scale it for tablet or iphone? does it work also?

#6

In the example I gave you, you specify fixed dimensions for the container div. Now you can also add a width:100% to both images. That way, when you change the dimensions of the container div, the images will force themselves to its width.

You can also decide never to specify dimensions for the container div and only specify dimensions for the images. In px, or percent. The container div will enlarge as needed.

There are many ways to achieve what you want but the 2 methods above are quite obvious. I they work for you, no need to look further.

#7

Also I may have not give you the best techniques for what you need to do, because I don't know about the finality of it. You didn't tell me why you need two images stacked.

Depending on what you're trying to do, we could also have used one element with two backgrounds, a combination of image + background, a combination of elements with backgrounds, a combination of elements containing images... lots of things are possible.

That's a general advice for when you want to get help from here: show you goal first, before asking for specific. HTML/CSS offer a very large variety of solutions for every design question. And as Webflow designer is respecting HTML/CSS a lot... we have all those potential solutions at hand.

#8

Ouh okay :slightly_smiling:

The main reason is i wanted to animate few icons. For exmaple a clock icon with 4 green parts to show people we are 24 hours available. I make them visible one by one with a delay of 200 ms.

If you have easier way to slove that problem let me know it!

And thanks for helping me :slightly_smiling:

#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.