Design comparison
Solution retrospective
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!
Community feedback
- @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 helpful0@wesleyjacobyPosted over 2 years ago@Fansters
Thanks so much for that link. That explains it perfectly.
As for the :active, the design screenshot had the word active in it, so I took it literally. Haha. Hover does make much more sense. I'll change the code to have :hover instead.
Thanks again!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord