akhademik• 420
@akhademik
Posted
you can try this:
div.card {
your image
}
div.card::before:hover {
your overlay color
}
div.card::after:hover{
your eye icon
}
Marked as helpful
1
Design comparison
Solution retrospective
I thik putting eye icon over image is littele difficult.Still it is not working as shown in challange .
Community feedback
Rodrigo Vergara• 680
@UnTalPeluca
Posted
For the eye icon you could wrap .main-img and .icon in a div. To this new div give it a "position: relative" and for the .icon give it a "position: absolute" and "top:0". You can remove the translate and left. "Absolute" elements take as reference the position of the closest "relative" parent element. By giving it top:0 it will position itself at the top of the div that wraps the image.
Marked as helpful
1
sujit• 40
@SujitAdroja
Posted
Yeh sure I will try it .
0
sujit• 40
@SujitAdroja
Posted
First of all thanks for reply. Thank you for the solution it helped a lot.
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