nft-preview-card

In order to add the active hover state you need to add a "curtain" over your image for it to work. What I did was something along the lines of:

For the HTML:

<div class="image-div">
   <img src="./images/image-equilibrium.jpg">
   <div class="curtain"></div>
   <img src="./images/icon-view.svg" alt="" class="curtain-icon">
</div>

For the CSS:

.image-div img {
   max-width: 100%;
   height: auto;
   display: block;
}

.curtain {
   background-color: var(--Cyan);
   width: 100%;
   height: 100%;
   position: absolute;
   opacity: 0%;
   transition: opacity 0.25s;
}

.img-div:hover .curtain {
   opacity: 50%;
}

.curtain-icon {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0%;
   transition: opacity 0.25s;
}

.img-container:hover > a > .view-img {
   opacity: 100%;
}

This is mainly done using the :hover effect. Most of this css is just setting up the curtain's appearance. Hope you find this useful 👍