All solutions

This is the first challenge where I wanted to explore the mobile responsiveness so I have adapted it to different screen sizes. Please let me know if there is anything I can do to improve my code and/or write cleaner next time :)

Thanks!

UPDATE: RESOLVED! SOLUTION:

1. deleted the "view" icon class from both html and css
2. added to .overlay the below line: background:url("./images/icon-view.svg") no-repeat center hsla(178, 100%, 50%, 0.5);

/used hsla instead of hsl in order to add initial opacity/

1. changed in .containerimage:hover .overlay -> opacity=1; This way the icon appears with full opacity while the background seems to be faded as the challenge required.

Hello! At it with my second challenge and I admit, the overlay effect on hover was challenging. As you can see I couldn't make the View icon at opacity 1 and it pulled the value from the opacity of the overlay:hover. Any thoughts and advices about this? Same goes with putting a text instead of the icon

Additional feedback on how I can make my code cleaner is highly appreciated! :)

First challenge, any feedback or suggestions is highly appreciated!