NFT Preview Card

Hey man, looking good!

To answer your question I added the following code:

In your HTML file:

(after the opening <main> tag)
        <div class="eth-img-wrapper">
            <img src="/images/image-equilibrium.jpg" alt="Diamond NFT Image" id="equilibrium">
            <div class="eth-hover">
                <img src="/images/icon-view.svg" />
            </div>
        </div>
(before the opening <article> tag)

To your CSS:

(after #equilibrium )

.eth-img-wrapper {
    position: relative;
}

.eth-hover {
    position: absolute;
    background-color: cyan;
    width: 100%;
    height: 100%;
    top: 0px;
    display: none;
    opacity: 0.5;
    justify-content: center;
    align-items: center;
}

#equilibrium:hover + .eth-hover{
    display: flex;
}

So basically what I did was I added another <div> which is invisible on top of the NFT image. Both the NFT image and the new div are child elements of the new eth-img-wrapper element I created. I made the position of the new div element absolute and the wrapper element relative, just so the new <div> can overlap/sit on top of the NFT image and will match the position + resolution of the actual NFT image. Whenever you hover over the NFT image it will make the div visible again, and there you have it.

Hope this helps!