Anosha Ahmed• 9,300
@anoshaahmed
Posted
To avoid accessibility issues in the future, wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more here
Good job :)
Marked as helpful
0
Design comparison
Solution retrospective
Two challenges I ran into was first the HR I couldn't figure out how to get it anymore thin, and the second was the active state for the image I ended up just creating an overlaying div that acted as the hover state but if there's a better or more simple way to do so let me know!
Community feedback
Mark Cates• 110
@mscates
Posted
for the opacity, you can wrap the image in a container and give it a background color and then when you hover over the container img:hover like this, you can use the mix-blend-mode: multiply with an opacity of say .6 and you can get the hover effect like on the design. here is some sample code to see how it works.
<div class="example"> <img src="/images/image-equilibrium.jpg" alt="equilibrium" /> </div>.example { background-color: $primary2; height: 300px; border-radius: 10px; } .example img { max-width: 300px; width: 100%; border-radius: 10px; }
.example img:hover { opacity: 0.6; mix-blend-mode: multiply; border-radius: 10px; transition: 0.5s ease; cursor: pointer; }
Marked as helpful
0
Fabricio Rivera• 90
@FabricioRivera2021
Posted
I ran into trougles with the hover image too, dont know if its a better way but i lower the opacity of the image in the hover, and put cyan on the container of the image and show the eye with a background image.
0
Please log in to post a comment
Log in with GitHub
Join 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