NFT preview card component

Hi @ujwalvinay

You can put the overlay hover on the image by adding an image wrapper and using a pseudo element, something like:

<div class="img-wrapper">
    <img src="images/image-equilibrium.jpg" alt="image" id="banner">
</div>

.img-wrapper {
    position: relative;
}

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

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

Hope that helps! 👍