NFT Preview Card - Next.js and Tailwind CSS

Solution retrospective
I had trouble getting the right hover effect for the image. The eye symbol is still affected by the overall opacity of its parent container and I couldn't get it to display in full opacity. I am looking for suggestions on how to achieve this. Thanks
Please log in to post a comment
Log in with GitHubCommunity feedback
- @catherineisonline
I did something like this:
<div class="container-image"> <div class="main-image"></div> <div class="color-image"></div> </div>
.container-image { position: relative; cursor: pointer; width: 100%; max-width: 18.75rem; height: auto; border-radius: 5px; overflow: hidden; } .main-image { background-image: url("images/image-equilibrium.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; height: 100%; min-height: 18.75rem; width: 100%; } .color-image { position: absolute; top: 0; width: 100%; min-height: 18.75rem; height: auto; background-image: none; } .color-image:hover { background-image: url("images/icon-view.svg"); background-color: var(--cyan); background-repeat: no-repeat; background-position: 50% 50%; background-size: 20% 20%; opacity: 0.5; transition: background-color ease-in-out 0.3s; }
Marked as helpful - @zouvier
create a cyan color as a rgba . the last value is used to set the opacity. Use that value for the bg and your eye should show up properly
'nft-cyan-hover':'hsl(178, 100%, 50%, 0.5)'
This will give you the transparency effect while keeping the eye fully visible on hover
Thought i would comment since your post helped me figure out the hover effect
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord