help with "see more" fade on the bottom of elements and stacking images on top of each other

i want the images to look like image 1 but i also wanna add a "see more" fade on the last image(the brown one) so it expands when clicked, i'll do the js on my own just show me how to stack them on top of each other(in a "clean code" way) and add the "see more" fade effect. almost forgot codepen: https://codepen.io/staticoly/pen/yLZLQbo
No description
No description
8 Replies
ChooKing
ChooKing8mo ago
The fading is a linear gradient that goes from transparent to background color. I do not understand the stacking part of your question. Unless I am misunderstanding it completely, you don't need to do anything special at all. It is default behavior for block elements to stack on top of each other. The code in your codepen already has items stacking on top of each other.
pary
pary8mo ago
thanks bruh, i'll try that out. look at the image i attached with the post.
ChooKing
ChooKing8mo ago
I looked at the image, but that doesn't clarify anything for me. I just see boxes next to each other in a vertical arrangement. That doesn't require any special code.
pary
pary8mo ago
my bad
pary
pary8mo ago
No description
pary
pary8mo ago
i want them to intersect type shi
ChooKing
ChooKing8mo ago
You can get overlap using negative margins.
pary
pary8mo ago
that worked, thanks a lot!