NFT Preview Card Component

"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 ✌

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!