Design comparison
Solution retrospective
What is the best possible way to align the eye-view pic in the middle of the equilibrium image? Which pseudo-class one should use to make hover type of effect in small screen size?
Community feedback
- @eleswastakenPosted almost 3 years ago
Good job!
On the design image you can see the pointer cursors, that means that those elements are interactable. And that usually means that element is either a button or a link. E.g. in this challenge when you try to click the image, you would expect it to take you somewhere so it is a link. Same is with the card title and author name.
For an alignment. A good practice is to put images in a wrapper(link, div, figure), and set a specified width and height. The eye is 48x48 px, so set the width to that. Then you could center align it using flexbox.
On small screen sizes there is no need to worry about hover effects(usually). You change an element using
element:hover {}
. You could just change the:active
state to the:hover
.Good luck!
Marked as helpful1@Eshan01Posted almost 3 years agoThank you! @eleswastaken for reviewing my project and clearing all of my doubts, now I'll update this project.
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