NTF Card Component using HTML, CSS and Flexbox

This challenge was much easier thanks to the helpful feedback I received from my previous challenge. However, there is one thing I don't quite understand:

I struggled a lot with getting the overlay right and centering the eye icon. I eventually found a resource online that worked, but I don't quite understand what's happening in this block of code:

.overlay img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

From what I understand, position: absolute; puts the eye icon at the top left of its parent. Then the top: 50% and left: 50% I thought would put the icon in the middle, but it doesn't...just.

Then the bit that I really don't understand is the transform: translate(-50%, -50%);. I tried experimenting with the percentages and they move the eye icon around a little, but I don't know what it's moving in relation to?

Lastly, could this have been done an easier way? Perhaps with background-image: url(...), or am I on the right track with this?

Thanks for the help!