@correlucas
Posted
👾Hello Eman, congratulation for this amazing solution!
You've done almost everything in this challenge, even the hardest part that was the hover effect, congrats for that Eman!
I think you need only to give less opacity in order to display the nft image with a little bit of transparency, try a value around
.card .img .overlay {
opacity: .5;
}
And for the container border, they should be less rounded, there you try border-radius: 12px;
Hope it helps happy coding!
@Eman-Abdallah
Posted
@correlucas the problem when i did opacity: .5; the view icon take the same opacity so it fade
@correlucas
Posted
@Eman-Abdallah Ah okay, maybe to improve it a bit, you can apply the opacity only to the cyan background-color and let the icon with the full opacity, to have more contrast.
If you want to use my solution as a reference for that, here's the link:
https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX
Marked as helpful
@Eman-Abdallah
Posted
@correlucas thanks
