Css3, HTML5, flexbox, pseudo-class and pseudo-elements

Hi, IlnaraAckermann! 👋

Great job on creating the overlay for the Equilibrium image! 👏

You have wrapped the image with an interactive element and used pseudo-elements to create the overlay. It is rare to see a good solution for the overlay.

I recommend adding an overflow: hidden to the .image-link. Then, move the border-radius: 0.5rem from the .image to the .image-link. This way, the overlay will have rounded corners.

Also, In your CSS, I notice this selector .nft-card .image-link .image while that only needs to be .image. Don't nest selectors unnecessarily. Remember to keep the CSS specificity as low and flat as possible.

Then, make the <a> a child element of the <h1>. <h1> should not be a child element of <a> element. It results invalid HTML. Caninclude

I hope this helps. Happy coding! 😄