@grace1999-pixel
What challenges did you encounter, and how did you overcome them?
I did not know how to make the image active with the eye icon.
Pycoder
@Pycoder300All comments
- @Pycoder300
Hi! i have reviewed your live project and your code for the challenge you mentioned here. It seems like you are having trouble displaying the sky-blue background color and the eye logo on top of the image. One way to achieve this would be to wrap the image tag with a <div> container (You can also give it a class).
This would be a container solely for the image tag. Now the trick here is to create two hover classes. One for the image tag that you have already created (just keep the opacity to 0.5 for the img) and another one for the <div> container that holds it. Instead of applying the background color directly to the image itself, you can apply it on the <div>. Additionally, you can also set a background image property containing the SVG link on the <div> as well. Also, you need to set two more properties like background position to center and background repeat to none.
(Please note: when you wrap the <img> with a <div> you will have to set its dimensions first and then assign the height and width of the <img> tag to 100%. This way the image will be displayed to the fullest of height and width that the <div> has. For example .image-container{ height: xyz pixels; width: xyz pixels;} img{height: 100%; width: 100%} ).
Marked as helpful - @Zaraban6What specific areas of your project would you like help with?
I implemented this exercise completely in the system. But when I upload to the git, the icon view is not displayed. please guide me
.img-m::after { background-color: hsla(178, 100%, 50%, 0.5); content: url(/icon-view.svg); position: absolute; display: flex; align-items: center; justify-content: center; inset: 0; opacity: 0; transition: all 2s ease-in-out; }
@Pycoder300Try adding ./images before the icon link inside the url if the icon isn't displaying.
