Preview card using HTML and CSS - Overlay image

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/

3. 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! :)