Ridwanullah• 210
@DanonymousCoder
Posted
/* Style for the eye icon */ .image-container .overlay img { height: 50px; width: 50px; color: white; }
Marked as helpful
0
Design comparison
Solution retrospective
I put a background image and it didn't put the image, what do I do? I also put a hover on the image but a part of that color comes out, how do I give it to the image?
Community feedback
Ridwanullah• 210
@DanonymousCoder
Posted
/* Style for the overlay */ .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 255, 255, 0.5); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s; border-radius: 10px; }
Marked as helpful
0
Ridwanullah• 210
@DanonymousCoder
Posted
Nice work bro, keep grinding. I saw that you have a problem with the hover effect of the image. Firstly you have to remove the height with the background-color of cyan. Secondly you would need to create a CSS element like this element:hover .
Marked as helpful
0
LuccaMauroMolina• 130
@LuccaMauroMolina
Posted
@DanonymousCoder good evening, thank you very much, I thank you very much and I will try that
0
Ridwanullah• 210
@DanonymousCoder
Posted
/* Show the overlay and transform the image when hovered */ .image-container:hover img { transform: scale(1.1); }
.image-container:hover .overlay { opacity: 1; }
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