NFT card

Community feedback

• 

  Akanni Feyisara•110

  @Feyisara2306Posted over 2 years ago

  Hello Heitor! well done on completing the challenge.

  As regard your question on image overlay hover effect, put the two images in a separate div and declare an empty div for the overlay, then style its container div with a position:relative; and a 100% width. Then display the images as a block, and the overlay div position: absolute; .

  Here is a snippet below...

  .image{ position: relative; width: 100%; }

  .image_img{ display: block; width: 100%; border-radius: 10px; }

  .image_overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 255, 247, 0.4); display: flex; align-items: center; justify-content: center; opacity: 0; border-radius: 10px; }

  I hope this helps.

  Good luck and happy coding!

  Marked as helpful

  1