Design comparison
Community feedback
- @correlucasPosted about 2 years ago
๐พHello @kateneilsen, Congratulations on completing this challenge!
I liked a lots the work you've done here, the hover effect with saturation its nice. If you want to add the effect overlay with the icon, here's the step-by-step:
Here's how you can add the hover effect:
Container needed to position the overlay. Adjust the width as needed
.container { position: relative; width: 100%; max-width: 340px; }
Make the image to responsive
.image { width: 100%; height: auto; }
The overlay effect (full height and width) - lays on top of the container and over the image
.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .3s ease; background-color: red; }
When you mouse over the container, fade in the overlay icon
.container:hover .overlay { opacity: 1; }
The icon inside the overlay is positioned in the middle vertically and horizontally .icon { color: white; font-size: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }
When you move the mouse over the icon, change color
.icon-eye:hover { color: hsl(178, 100%, 50%, 0.5);; }
๐จโ๐ปHere's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX
โ๏ธ I hope this helps you and happy coding!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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