Hi everyone, This exercise went pretty smoothly until I had to do the hover effect for the main image. I used Grid to stack the main image, a teal background, and the eye icon, but couldn't figure out the icon hover effect. I would appreciate it if someone could give me feedback on this aspect! Many thanks,
@AdrianoEscarabote
Posted
Hello alexmckm, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:
To solve your problem in a simple way, we can do this:
.icon {
display: none;
}
picture:hover .icon {
display: block;
}
The remainder is excellent.
I hope it's useful. 👍
Marked as helpful
@alexmckm
Posted
@AdrianoEscarabote It works now, thank you so much!
@thgsnake
Posted
Hi friend, put a display:none on the class with eye image. Example: .photo-eye{ position:absolute; display: none; and to show only on hover. Ex: .photo-area:hover .photo-eye{ display:flex;}. I did it like this and it worked.
Marked as helpful
@alexmckm
Posted
@thgsnake Many thanks for your input Thiago, it works now! Much appreciated
@thgsnake
Posted
@alexmckm :)
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
