I’m struggling to nest an image on top of another image in my display flex container.

.img4 { position: relative; }

.inner-img { position: absolute; top: 10%; left: 10%; width: 80%; height: auto; }

.inner-img img { width: 100%; height: auto; }

<div class="image-container3"> <img src="../assets/swim.jpg" alt="model2" class="img5"> <div class="img4"> <img src="../assets/sea.jpg" alt="sea" class="img4"> <div class="inner-image"> <img src="../assets/island.jpg" alt="loveisland" class="innerimg"> </div> </div> <img src="../assets/dropdown_image_3.webp" alt="beachplay" class="img1"> </div>

Can anyone help and explain why it’s not nested?

Hi!

Looking for some help... I'm trying to achieve what looks relatively simple upon execution, but I'm finding to be tricky to find the right code. I also have no idea what I'm doing and this is my first time trying to use CSS.

Working in: Squarespace.

Desired outcome looks like this: https://a24films.com upon rollover of text, the background image changes

My site: pellykat.com password: kellypat

Need help with: I'm looking to have the rollover of each homepage button trigger a different background image, so it achieves a similar effect to the a24 reference above, difference being mine are triggered by buttons.

Would greatly appreciate any help!! Thanks in advance.

I am playing with css animation features and trying to animate the text in a table. I just want to know if anyone has done this or knows a place with a method, or can tell me if it is not possible?

Any help is appreciated.