Design comparison
Community feedback
- @walterfolkPosted about 2 years ago
The active states are already added, I completely forgot to make them. Thanks for your suggestions.
0 - @denieldenPosted about 2 years ago
Hello Walter, You have done a good work! π
Some little tips to improve your code:
- You can add the effect
:hover
creating adiv
that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution - use
main
tag to wrap the card and improve the Accessibility but not as a container of that one element - also you can use
article
tag instead of a simplediv
to the container card for improve the Accessibility - use
min-height: 100vh
to body instead ofheight
, otherwise the content is cut off when the browser height is less than the content - instead of using
px
use relative units of measurement likerem
-> read here
Keep learning how to code with your amazing solutions to challenges.
Hope this help π and Happy coding!
0 - You can add the effect
- @correlucasPosted about 2 years ago
πΎHello @walterfolk, Congratulations on completing this challenge!
Great code and great solution! Iβve few suggestions for you that you can consider adding to your code:
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!
0
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