NFT Preview Card Component

Community feedback

• 

  Prithvi•110

  @Prithvi12890Posted over 2 years ago

  "I am facing issue opacity of icon while hovering. Please give me advice to fixed this. All feedback are welcome. Thank You"

  Hello Keshav, You can try giving just the background color an opacity by replacing hsl with hsla (for the color) with desired opacity instead of giving the whole hover effect and opacity. This will make just the background transparent but not the icon-view SVG

  Hope this is helpful and looking forward to seeing your final result ✌

  1
• 

  Zhemchuzhnyi Andrii•50

  @n3kk3llPosted over 2 years ago

  Hi Keshav

  Answering to your question, you can check the way I did it on my solution. Anyway:

  • You have to set position property as absolute (don't forgive to set position: relative to its parent) and hide div that is sibling to image:

  .equil .overlay {
      position: absolute;
      top: 0;
      left: 0;
      visibility: hidden;
      opacity: 0;
  }
  

  • And show this block by hover at image:

  .equil img:hover .overlay {
  visibility: visible;
  opacity: 1;
  }
  

  • The rest you have to do is to style appearing <div class="overlay"></div> block. Be creative!

  If you'd have some problems with that solution, you're welcome to ask more. Hope I helped you!

  Good luck with that! Keep it going!

  0

  ---

  

  Zhemchuzhnyi Andrii•50

  @n3kk3llPosted over 2 years ago

  Oops.. I forgot to add one more thing: when you shall do absolute positioning, you should fit overlay block into his parent by:

  .equil .overlay {
      width: 100%;
      height: 100%;
  }
  

  Just add it to rule above =)

  0

  

  Keshav Tulsyan•170

  @codekeshPosted over 2 years ago

  @n3kk3ll As what I wrote you did same and just add visibility. I have to fix only icon but by default transition effects on whole.

  0