All comments

• 

  Keshav Tulsyan• 170

  @codekesh

  Submitted 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

  

  NFT Preview Card Component

  2

  20

  

  Zhemchuzhnyi Andrii• 50

  @n3kk3ll

  Posted 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

  This comment has received 2 repliesShow