Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT preview card component using Bootstrap

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback welcome Each time i try to hover the image, icon view also got opacity same as overlay. Is there a way to make icon view got different opacity from the overlay? Thank you

Community feedback

@djbedford

Posted

Hey, your solution is looking great so far! For the opacity issue you mentioned you could try setting the background colour using rgba instead of opacity on the div. So on the "overlay" div remove the opacity attribute completely and replace the background-color attribute with 'background-color: rgba(0, 255, 247, 0);', you will also need to specifically set the opacity to zero of the image within the "overlay" div and then on hover change the background colour of the "overlay" div to half opacity with 'background-color: rgba(0, 255, 247, 0.5);' and the images opacity to 1. With these changes you will have the desired effect of the icon having a different opacity to its background. The reason you need to do it this way is because the opacity of the child element cannot be more than that of its parent.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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