made the responsive nft preview card

Hi there! Hope this message found you well. I jumped to your source code and here is some suggestion:

• never throw an <img> element directly, always put it in a <figure> element or in a paragraph

• i found that everywhere where the cursor becomes a "hand pointing" you make a link with the <a> element. Well, sometimes they are not link at all and even if you set the refering attribute to the following href="#" it is not the best way to do it because it reload the page and it doesn't help semanticly. So here is how you could change the appearance of the cursor in css by just using the cursor: pointer;

• now let's get to your main question here. Before everything else wrap your <img> into an <figure> and then in your css delete everything about that image styling. So, first thing first, we make the figure relatively positionned so that whatever inside it with an absolute position will be positionned inside it and not outside so that it still in the same place of the image. After that we'll use the ::after selector to the figure at hover to make the eye icon appears that is why you should wrap your image inside a <figure> tag otherwise it won't work with the ::after . It will be usefull for your next projects to learn about ::before and ::after css selectors. Here is the code:

// this is just to make the image fit the figure element so that it won't overflow
img{
width: 100%;
object-fit: cover;
}

figure{
position: relative;
}
figure:hover::after {
content: ""; // this is necessary
position: absolute; //it'll be placed inside the figure space since that one is in position relative
inset: 0; // this set the top right bottom left position property to 0 so that the content strecthes
background: url(icon-view.svg) no-repeat center; // set the background to it
cursor: pointer; // this is just to change the appearance of the cursor try it
}

i use the inspector and it works try it and I'll be glad to help again friend if there is any other issue. Happy Coding :)

You may have missed icon-view.svg in the main directory.

You can overlay an eye icon or svg of your choice and then change the opacity of the icon on hover

If you want to change the image on hover effect try to use onmouseover property of CSS and also use onmouseout property on the same img tag, so that image will change according to the prescribed src attribute. Another thing is that try to put prescribed font given in the style guide of the project, and they also tell about the font size in the style-guide.