NFT preview card component using HTML and CSS
Design comparison
Solution retrospective
I found it difficult to implement the hover part for the image. What is the best way to do it? And how can the hover color be changed?
Community feedback
- @Hazel-BlackPosted almost 2 years ago
This was very difficult for me as well what I did to get the color change was create 2 div's one serving as a parent to the div containing the SVG. for the parent div I used the css property background-image to place the hero image. for the child div ( which contained the SVG ) i gave it a back-ground color and change the opacity of the color by adding 0.534 to the hsl value. then I set the child to match the width and height of the parent and gave it an opacity of 0, finally i used the hover pseudo class on the child to return its opacity to 1.
I really hope all that makes since if not slack me I'm happy to work through it with you :D
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