Responsive NFT Card using only HTML and CSS

Hey there, here's what you can do to achieve the hover effect on your image......

• first of all I would recommend you to wrap your image in a div, there's no harm in that.....
• then create a new div that's going to give you the hover effect, give it similar width and height styling just like the nft-img
• then you can add a background color to the newly created div, particularly using an rgba value and a background-image view-icon(eye-svg) and having a z-index of negative value

.img-overlay:{
     background-image: url(eye-icon.svg);
     background-color: rgba-value;
     width: [similar to nft-img];  
     height: [similar to nft-img];
     z-index: -1;
}

• give your nft-img a z-index of zero #nft-img{ z-index: 0 }
• on hover over the parent-element of the image and the overlay...... you can increase the z-index of the overlay, i.e.

.img-overlay:hover{
      z-index: [value greater than #nft-img] ;
}

I hope this works, I would recommend you to look for z-index CSS property......glad to help you :)