Sharpening up my css skills. Starting to get positioning down better. Took some time to figure out how to put an overlay color on the main image when hovering over it, but after some google searching I was able to get it working.
Hello @brewaskew,
That looks good but It can be Improved.
The clock icon is stretched. stretch is the default value for align-items, so changing it would be the solution for it.
When you hover on the image there is no eye-icon. My solution is to add img element for the eye-icon in the html and set it to absolute and put it in the center and set the display to none: and when you hover it the display would be inline-block. you can try it.
but, better solution is to use pseudo element such as ::before and ::after. It was just suggested to me by someone here in frontendmentor and I will update my solution also.
have a good day, :)
