Design comparison
SolutionDesign
Solution retrospective
Got everything except for doing a colour overlay on hover; Any feedback is welcome 👋
Community feedback
- @vanzasetiaPosted over 2 years ago
Hi, Nalosman! 👋
Congratulations on completing this challenge! 🎉
About the image overlay, here are some guidelines:
- First, wrap the image with an interactive element, in this case, it could be a link that is going to navigate the user to the new page to preview the image.
- Second, use pseudo-element to create the overlay.
- Lastly, use background properties to display the eye and the background color.
You could see my solution as your reference.
It looks like you want to have a visually hidden
h1
which means that it's is visible by assistive technology but hidden for visually. Setting it asdisplay: none;
is going to make theh1
hidden for both assistive technology and visually. I would recommend searching thesr-only
styling.Some feedback:
- Accessibility
- All the page content should live inside landmark elements (
header
,main
, andfooter
). By using them correctly, users of assistive technology navigate the website easily. In this case, wrap all of it withmain
tag,except the attribution. The attribution should be lived inside thefooter
.
- All the page content should live inside landmark elements (
<body> <main> page content goes here... </main> <footer class="attribution"> attribution links goes here... </footer> </body>
- Alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.
- Use the creator's name as the alternative text for the avatar.
- Use interactive elements (
a
) for any elements that have:hover
or:active
states. - Create a custom
:focus-visible
styling to any interactive elements (button
, links,input
,textarea
). This will make the users can navigate this website using keyboard (by usingTab
key) easily. - The
footer
element should be the attribution (outside themain
landmark). So, swap thefooter
in the card element with adiv
instead. - Use CSS
border
property to create the line.hr
element has a role as a separator. In this case, the content below the line should not be separated. - Changing the
html
or root font size can cause huge accessibility implications for those of the users with different font size or zoom requirements. Read what an accessibility expert (Grace Snow) has said about it. - Styling
- To make the card perfectly in the middle of the page, you can make the
body
element as a flexbox container. By doing that, you can remove themargin
from the.card-container
.
- To make the card perfectly in the middle of the page, you can make the
/** * 1. Make the card vertically center and * allow the body element to grow if needed */ body { display: flex; align-items: center; justify-content: center; min-height: 100vh; /* 1 */ }
- I would recommend using
em
unit forborder-radius
on the.card-container
to prevent unexpected behavior. Percentage unit is a relative unit and in this case, it is relative or depends on what?
That's it! Hope you find this useful! 😁
Marked as helpful2
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