Streaming live at 10am (PST)

Overlapping items

Hi
I want to place an image on top of another image, so they will be parallel to each other.
How can I do that?
Thanks


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @yannick the link you share is not valid! Please provide more so I can help.

1 Like

I did not share any link.
i just want to know how to do it.

Anyone…?
Is it even possible?

@yannick - I’m sure what you are looking to do is possible. However, an example or screenshot of exactly what you are looking to do would be helpful to anyone trying to answer your question.

If you are looking to stack two images, setting them both to display block event something as simple as this:

<img src="https://via.placeholder.com/500" alt="" style="display:block;">
<img src="https://via.placeholder.com/500" alt="" style="display:block;">

Have a look at this guide:

If you want to have elements overlap each other, you can work with relative/absolute positioning and also with margins that push content into each other!

@yannick there are several ways of doing this.

The best way is to create a parent container with a background image, and then insert and image inside this container.

Other way, is creating a relative container with the two images with position absolute.

Depending on the use, you will have to create different layouts.

1 Like

Thank you for replying.
Basically I want to create an effect that will show the top image on hover only. And on hover out, it will show back the bottom image, but I need it to be exactly overlap.
I’ll try your ways today and I’ll update later

SOLVED!
I created a container, use one image as background, and the other as an image inside the container.
Thank you everyone!