Design comparison
SolutionDesign
Solution retrospective
I have no clue how to make the hover effect on the picture, please help....
Problem fixed
Community feedback
- @SoulRvr29Posted over 1 year ago
To make the hover effect, first add the icon
icon-view.svg
to the HTML in the section with the hero class. Then replace in your CSS.hero img { border-radius: 10px; }
with:
.hero { background-color: var(--cyan); border-radius: 10px; overflow: hidden; position: relative; } .hero:hover img:first-child { opacity: 0.5; cursor: pointer; } .hero:hover img:last-child { display: block; cursor: pointer; } .hero img:first-child { display: block; width: 100%; } .hero img:last-child { position: absolute; display: none; top: calc(50% - 1.5rem); left: calc(50% - 1.5rem); width: 3rem; height: 3rem; }
The background behind the image will be cyan and when hover occurs the image will become semi-transparent. You can rename
img:first-child
andimg:last-child
to your own class names for better readability.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