I have made my site responsive but I'm struggling to change the equilibrium image's background color on hover. Please help me with this
@adram3l3ch
Posted
you can either add a new div or wrap the image in a div.
<div class="image-wrapper"> <img/> </div>style{ .image-wrapper::after{ content:""; position:absolute; inset:0; background:/that cyan with a less opacity/ opacity:0; } .image-wrapper:hover::after{ opacity:1; } }
Marked as helpful
@ereljapco
Posted
You can make the on hover effect by adding a div inside the div container of the equilibrium image. Then add the view image inside the newly created div. Make use of the position property where the new div is placed on top of the equilibrium. Set the background-color of the new div to the primary. Then set the opacity of the new div to 0. Then set the opacity of the new div on hover to 0.x.
For the accessibility issues, you can use main tag instead of div tag for the div.container and footer tag for the div.attribution.
Marked as helpful
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
