Vanilla CSS/Minimal Code NFT Card

Hey @ChrisAndrewsDev 🙂. You nicely solved this problem. Congrats 🎉🎉

You used top: 42%; translateY(-43%); to position the .icon-container above the image. You do not need this. You can easily do that by using top: 0. Because '.icon-container's position is relative to .image-containeras you usedposition: relativein.image-container`;

.image-container {
    position: relative;
}

.icon-container {
    opacity: 0;
    position: absolute;

    /* top: 42%;
    translateY(-43%); */

    top: 0;

    height: 100%;
    width: 100%;
    background-color: var(--cyan);
    border-radius: 10px;
    transition: all .4s ease;
}