NFT Component challenge

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Pedro.

  I think there are some ways to implement that. Yours included. However, with your method, the eye image is only 50% opaque. In the design sample, we could see that the eye image has 100% opacity. Only its background that has 50% opacity. To achieve this, we only need to change a few codes. We also add a little bit of transition for opacity.

  Change this:

  .nft-eye {
      ...
      background-color: var(--color-primary);
      ...
  }
  .nft-eye:hover {
      opacity: .5;
  }
  

  to this:

  .nft-eye {
      ...
      background-color: #0bffff99;
      ...
      transition: opacity 0.3s;
  }
  .nft-eye:hover {
      opacity: 1;
  }
  

  Feel free to check out my solution if you want to know how I did it.

  Hope this helps. Happy coding!

  0