Design comparison
SolutionDesign
Solution retrospective
Couldn't figure out how to get the view icon to show on hover
Community feedback
- @ezechukaPosted about 2 years ago
Nice work James on finishing this project. Having observed your code you can make the icon display by this few changes:
-
In your
index.html
you should change it from a div to an img:<img class="card__image--icon" src="./images/icon-view.svg" alt="preview">
-
Go to your style.css and set the display to
none
by default andblock
on hover.
.card__image--container .card__image--icon { display: none; }
.card__image--container:hover .card__image--icon { display: block; position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); }
1 -
- @Psypher1Posted about 2 years ago
Thank you, it was fun to do.
And thank you. That fixed my image on hover :)
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