Skip to content
OverviewSolutions
7
Comments
1
Edmunds
@Fansters

All comments

  • Wesley•330
    @wesleyjacobySubmitted over 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

    1
    Edmunds•170
    @FanstersPosted over 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
    0