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 Component - Image Overlay With Rounded Edges

#bootstrap#styled-components

@Meauma13

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


  1. How did you get the image overlay to display correctly on clicking the centred image?

Community feedback

Umairā€¢ 240

@umairanwer

Posted

Hi, one of the methods to improve overlay img is to enclose it in a container, and inside this container also add an empty div which will be the cyan-overlay.

Now set cyan-overlay to 100% width and height, its color to cyan and its border radius should match the NFT img's radius. Initially set its opacity to zero.

Set hover tag of img container to change opacity of cyan-overlay to 0.5.

These tips will get the result you need. Please reply if you need any clarification.

Marked as helpful

1

@Meauma13

Posted

@umairanwer Hi. Apologies for not replying sooner, was engaged in other tasks.

Thanks so much for the hints, they were really helpful in solving the challenge.

šŸ‘

0

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