NFT Preview Card Component

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  iMAGE 📸:

  • "The active status on my "icon-view" when you hover you see the "icon" but the background color is not applying", After reviewing your code i found a way to apply the hover along with background-color

  ---

  • You can apply the following css rules to get desired output.

  .nft-image {
    background: url(/assets/icon-view-fffad88f.svg), #00ffff7d;
    background-repeat: repeat, repeat;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
  
  .nft-image img:hover {
    opacity: .38;
    cursor: pointer;
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Earl Villapaz•80

  @iEarlGPosted over 1 year ago

  @0xAbdulKhalid Thanks, man I will definitely try this later. Thank you again man. And thank you for the compliment man.

  0
• 

  solitary_coder•1,000

  @kabir-afkPosted over 1 year ago

  Heyy!! First of all , great code man , after reading it I think if you would have added

  background-color:cyan; in your .nft-image class then it might've helped, afterall it is a div tag , if you were able to set background img then background-color would have also been possible

  • HTML

  <div class="image">
        <img src="images/image-equilibrium.jpg" alt="pic of cube">
        <div class="icon-view"><img src="images/icon-view.svg" alt="icon-view"></div>
  </div>
  

  • CSS

  .image {
      position: relative;
  }
  
  .icon-view {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      background-color: cyan;
      border-radius: 10px;
      width: 100%;
      height: 99%;
      box-sizing: border-box;
      padding: 44% 45%;
  }
  
  .icon-view:hover {
      cursor: pointer;
      opacity: 0.375;
  }
  

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Earl Villapaz•80

  @iEarlGPosted over 1 year ago

  @kabir-afk Hey man, thank you for the compliment. I will also definitely try this code later. Thank you again man.

  0