@vanzasetia
Posted
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! 😄
Marked as helpful
@IlnaraAckermann
Posted
@vanzasetia I really apreciate u tips i will refactor my code. thanks
@vanzasetia
Posted
@IlnaraAckermann
You are welcome!