HTML + CSS

Right now, as you have your css, replace this to your .img-container::before. You can do this by inspecting elements first to see it works fine

   content: " ";
    position: absolute;
    opacity: 1;
    background-image: url(./images/icon-view.svg);
    background-position: center;
    background-size: 20%;
    height: 100%;
    width: 90%;
    background-repeat: no-repeat;
    background-color: blue;
    border-radius: 10px;

Of course, on background-color add the right color, I just wrote blue because I don't remember the color.

Good luck, though

Update: Don't forget to add space on content: " ", otherwise it won't work

Hi, Camilo. For the blue background, I would suggest taking a second look at the pseudo element ::before. Try using the background property instead of content for calling the eye image. It would look something like this:

content: " ";
position: absolute;
background: url(./images/icon-view.svg) cadetblue;
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
opacity: 0;

You might need to re-work your HTML to get everything right, but it's a start :)

I added a div with (same dimensions that cube image) position relative that it contains the eye image, that div has a cyan background with .45 as value for the alpha channel. The opacity is 0 until the mouse is over the div.