Frontend Mentor | Edmunds's profile

@wesleyjacoby

Submitted about 2 years ago

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!

NTF Card Component using HTML, CSS and Flexbox

Edmunds• 170

@Fansters

Posted about 2 years ago

Hey, good job on the challange!

I was wondering though, why did you use :active selector, instead of :hover on the images and text where it was necessary?

As for the element positioning, you said it yourself - top: 50%; left:50%; does position element in the center, but the position is calculated from the top left corner and you need to pull it back half its width and height. This article shows great example with picture, how it would center with and without transform property.

Marked as helpful

Edmunds

All comments

NTF Card Component using HTML, CSS and Flexbox