@KTrick01
Posted
Hi! An easy fix for your problem is that instead of changing your #view opacity to .5 on hover, change it to opacity 1 and just lower the opacity of the background-color to .5, like this:
#view:hover {
opacity: 1;
background-color: hsl(178, 100%, 50%, .5);
}
This way the eye will be fully visible because you only will change the background color opacity, but not of the entire container! Hope that it helps!
PD: If you put border-radius: inherit; to your #view, it will have the same border radius that the image
Marked as helpful
@Mark-a-obrien
Posted
@KTrick01 Hello Eduardo, Thank you very much for the feedback and suggestions. I didn't know you could do that with the background, so it will definitely come in handy thanks. I didn't even think of inheriting the border so I'll do that from now on thanks.
