I got to upload another solution!
Making the hover effect was a little challenging. And I still am not completely satisfied because I could not het the image of the eye as white as in the design. If anyone can tell me what I can do to improve it, that would be very nice.
Also, I could not get the line the same in Chrome as I got it in Firefox. Any pointers?
This was also my 6th day in the #100DaysOfCode Challenge!
Your card looks really good. I ran into the same issue with the view icon not being fully white. From what I've read the issue seems to be related to how opacity effects child elements. There might be a better fix but for mine I ended up setting the background to the cyan color with alpha instead of using opacity. So just "background: hsla(178, 100%, 50%, 0.5);" and then the icon shows up clearly.
I ran into issues with the view icon as well. From what I read it seems that opacity affects all the child elements.
To get around the issue I ended up using a div with the background set to the Cyan color and some alpha, so hsla instead of hsl. That left the view icon at 100% opacity.
