Design comparison
Solution retrospective
I had a little bit of trouble with the image overlay on user hovering, however, i found a simple solution to solve this case, i don't think that is the best solution, however it does it job, if anyone knows how to deal with it with a more elegant solution, i would be glad to know
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hello Tiago José,
Congratulation on completing another frontend mentor challenge. Excellent work! I have some suggestions regarding your solution:
- The most important part in this challenge is the interactive element. Since there's a :hover state on the image and means it's interactive, So there should be an interactive element around it. When you create a component that could be interacted with a user , always remember to include interactive elements like(button, textarea,input, ...) For this imagine what would happen when you click on the image, there are two possible ways:
1: If clicking the image would show a popup where the user can see the full NFT, here you use
<button>
.2: If clicking the image would navigate the user to another page to see the NFT, here use
<a>
.- You should have used
<a>
to wrapEquilibrium #3429
andJules Wyvern
too.
- The link wrapping the equilibrium image (
image-equilibrium
) should either haveSr-only
text, anaria-label
that indicates where the link navigate the user(not describes the image).
- For any decorative images, each img tag should have empty
alt=""
and addaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images in (icon-view, icon-ethereum, icon-clock
).
- Profile images like that avatar are valuable content. The alternate text of the avatar’s image should not be Avatar. You can use the creator's name
Jules Wyvern
. Read more how to write an alt text . Remove the<footer>
.
- There are so many ways to add the hover effect on the image , The one I would use, using pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on hover. There is no need for a extra clutter in the HTML. The icon view does not really need to be in the HTML. You can use CSS for it.
Hopefully this feedback helps.
Marked as helpful1@tiago-jv0Posted about 2 years ago@PhoenixDev22 Thanks for your detailed feedback, i am really grateful for your comment, acessibility is something that i am trying to get the grasp of, your comment helped me a lot in having a better understand of markup, thanks!!!!
1@PhoenixDev22Posted about 2 years ago@tiago-jv0 Glad to hear that it was helpful. Happy coding!
0 - @hyrongennikePosted about 2 years ago
Hi @tiago-jv0,
Awesome job the challenge, you can also use the before and after pseudo elements on the card__image div one to hangle the overlay color and one to add the eye icon.
1@tiago-jv0Posted about 2 years ago@hyrongennike Thanks for your feedback, i will try it
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