Pure HTML & CSS

Hello, Community! I would appreciate getting some help with my solution, please:

1. As seen in the live site, I didn't get to put the icon-view.svg over other visual elements. I had set it as an "::after" of a color box (div) that has a 0.5 opacity property (when active) but the pseudo-element inherited this setting. I had tried to use the "z-index" property in the three involved elements (color div, its "::after" and the main image) hoping to use ":hover" to change "z-index" and put the icon-view on top of everything but it didn't work. Despite this, I let the "z-index" in the code as a reference for future help. If possible, I would prefer to make minimum changes in the code, unless it's necessary to change for a completely new approach.
2. I didn't get either to use the emoji code point (, on index.html, line 39) in the changes that I made in the original attribution class. I pasted the bare emoji, but it doesn't seem to be a good practice.

Thanks for any feedback!