Submitted over 2 years ago

nft preview card component

Tami Ribeiro• 40

@tamiribeiro

Preview site View code

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

So... my first solution here, hi everyone 🖐🏻. I'm really happy with my results but there's this thing bothering me tho. How can I make my eye icon have a different opacity than its father element? I'm stuck here. Thank u in advance 💙

Community feedback

William Jesus Rivas Duran• 230

@wiridix

Posted over 2 years ago

Hi! you have a very good job. The detail with your hover in the image is that the container .overlay you have to place a transparent color ( hsl(178, 100%, 50%, 60%) ) and the overlay:hover set the opacity to 1. So you have the same effect as the design.

Good work!

Marked as helpful

Tami Ribeiro• 40

@tamiribeiro

Posted over 2 years ago

@wiridix thank u William for your feedback! You totally helped me and made it easier for me to understand my mistake btw. Now it works just fine✨! Thanks again for answering me 🤗

Aditya Singh• 460

@adityas24

Posted over 2 years ago

Great job Tami! Your markup is well structured and naming of classes is also done in proper manner. But i did not what icon you are talking about?

Tami Ribeiro• 40

@tamiribeiro

Posted over 2 years ago

@adityasingh84 thank u Aditya for your feedback! The icon is a small eye that appears in a hover state. It was supposed to be white with opacity: 1 but I wasn't able to make it work bcz its parent was with a lower opacity 🤷🏻‍♀️ but William's solution down here helped me tho. Thanks again for answering me 🤗

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord