Amal Karim ✅• 1,290
@amalkarim
Posted
Hi Pedro.
I think there are some ways to implement that. Yours included. However, with your method, the eye image is only 50% opaque. In the design sample, we could see that the eye image has 100% opacity. Only its background that has 50% opacity. To achieve this, we only need to change a few codes. We also add a little bit of transition for opacity.
Change this:
.nft-eye {
...
background-color: var(--color-primary);
...
}
.nft-eye:hover {
opacity: .5;
}
to this:
.nft-eye {
...
background-color: #0bffff99;
...
transition: opacity 0.3s;
}
.nft-eye:hover {
opacity: 1;
}
Feel free to check out my solution if you want to know how I did it.
Hope this helps. Happy coding!
0
