NFT Preview Card using Adjacent-Sibling Selector

Hi @braien-machado

You can put a hover on the img-container to show the eye icon and cyan background as a pseudo element. Something like...

<div class="img-container">
    <img src="./images/image-equilibrium.jpg" alt="equilibrium" class="card-img">
</div>

.img-container {
    position relative;
}

.img-container::before {
    content: '';
    background: url('./image/icon-view.svg') center no-repeat hsla(178, 100%, 50%, 0.5);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
}

.img-container:hover::before {
    visibility: visible;
    opacity: 1;
}

Here's a similar example

Hope that helps 👍