@Pycoder300
Posted
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
