NFT Preview Component - Image Overlay With Rounded Edges

Community feedback

• 

  Umair•240

  @umairanwerPosted almost 3 years ago

  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

  ---

  

  Anthony Aligbe•90

  @Meauma13Posted almost 3 years ago

  @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