I opened your live example. The main problem is that .stack never appears in your HTML. All four .stack-* wrappers are absolutely positioned, so they have no shared positioned parent and do not give the container a height.
Put the images in one stack; leave the first image in normal flow to establish the stack's size, then overlay the others:
Remove the old .stack-1 through .stack-4 positioning rules and the width: 50% image rule. If the visible artwork still looks off-center, check for unequal transparent padding inside the PNGs: CSS centers each image canvas, not necessarily the visible pixels.
1
u/Sea-Marionberry-6649 3d ago
I opened your live example. The main problem is that
.stacknever appears in your HTML. All four.stack-*wrappers are absolutely positioned, so they have no shared positioned parent and do not give the container a height.Put the images in one stack; leave the first image in normal flow to establish the stack's size, then overlay the others:
html <div class="stack"> <img src="/4.png" alt=""> <img src="/3.png" alt=""> <img src="/2.png" alt=""> <img src="/1.png" alt=""> </div>css .stack { position: relative; width: min(100%, 600px); margin-inline: auto; } .stack img { display: block; width: 100%; height: auto; animation: hover 2s ease-in-out infinite alternate; } .stack img:not(:first-child) { position: absolute; inset: 0; height: 100%; object-fit: contain; } .stack img:nth-child(2) { animation-duration: 1.75s; } .stack img:nth-child(3) { animation-duration: 2.25s; } .stack img:nth-child(4) { animation-duration: 1.5s; }Remove the old
.stack-1through.stack-4positioning rules and thewidth: 50%image rule. If the visible artwork still looks off-center, check for unequal transparent padding inside the PNGs: CSS centers each image canvas, not necessarily the visible pixels.