NFT preview card component with interactive hover elements

Hi 👋, perhaps some of this may interest you:

HTML 🧱:

• When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, we should use a <a> or <button> to wrap the image (depending on what happened when clicking on it). Also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.

CSS 🎨:

• Be very careful with changing the font-size of the root element (html) to 10px, I would say that it is not recommended at all, for accessibility reasons.

• If you want to center the content you should use place-content instead of place-items.

• Regarding de hover effect:

I leave you another way to do it in case you want to take a look: You can use the ::before pseudo-element to insert content (background and icon in this case) to an element (the image).

.img-box {
position: relative;
}

.img-box::before {
position: absolute;    
content: url(images/icon-view.svg);    
display: grid;
place-content: center;
background-color: hsla(178, 100%, 50%, 0.5);
width: 100%;
height: 100%;
opacity: 0;
}

.img-box:hover::before {
opacity: 1;
}

Please let me know if you want more info on any of these topics or disagree with something. I hope it’s useful 🙂

Regards,