NFT Preview Card Solution

Community feedback

• 

  Giang Nhật Khánh (Kayden)•150

  @KaydenGiang2512

  Posted about 3 years ago

  It was probably because I didn't phrase my suggestion well enough (quite hard to do so through text-only comments!), so I will paste in the link to my solution here so you can see what I tried to explain above. Hope this clears up any confusion you may have on our issue!

  https://github.com/KaydenGiang2512/Article_Preview_Component

  Best of luck :D

  12

  Marked as helpful
• 

  Giang Nhật Khánh (Kayden)•150

  @KaydenGiang2512

  Posted about 3 years ago

  Hi Lacey, great work on this project overall. I actually completed this project a few weeks ago so I might have a solution to your "eye image opacity" issue, which is by separating the eye-icon from the NFT image into 2 separate <div> tags. After that, create another <div> as the overlay and use position: absolute for all of these to ensure that they stack on top of one another. By putting the eye-icon in its own <div> tag, the opacity attribute from the NFT image will no longer affect it, and you can independently set the opacity of the eye to your choosing. Hope this helps and happy coding!

  P.S. the image is not horizontally centered in the entire card element, so that's another thing you should look into.

  01
• 

  Ahmed Bayoumi•6,680

  @Bayoumi-dev

  Posted about 3 years ago

  Hey Lacey, It looks great!...

  To fix the view-icon transparent, Use background-color: hsla(178, 100%, 50%, 0.5); instead of background-color: #00fff7; and change opacity: 0.7; to opacity: 1;

  .overlay {
         background-color: hsla(178, 100%, 50%, 0.5);
         //...
  }
  
  .img-wrapper:hover .overlay {
         opacity: 1;
  }
  
  

  Hope this is helpful to you... Keep coding👍

  02