Skip to content
Submitted almost 2 years ago

NFT preview card component using Flexbox

Zosima•220
@SantiagoPonce
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

NFT preview card component using Flexbox

If you have advice to make the overlay of the image please let me know, because the only way I found to do it was to enclose the image in a div with the color of the card and then when detecting the hover reduce the opacity of the image and to change the color of the div to cyan.

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted almost 2 years ago

    Hey there! 👋 Here are some suggestions to help improve your code:

    Regarding your question,

    There are several ways of achieving it, here is a link that will show you how to apply it.

    https://www.w3schools.com/howto/howto_css_image_overlay.asp

    • The picture element is not needed for this challenge.
    • The NFT image alt tag description needs to be improved upon. ⚠️This is what your users are purchasing. Assume you’re describing the image to someone over the phone.
    • Along with the blank alt tag, you also want to include the aria-hidden=“true” to your “icons” to fully remove them from assistive technology.

    More Info:📚

    https://www.w3.org/WAI/tutorials/images/

    • The profile image alt tag needs to be improved ⚠️. It should only state the following; “Headshot of -person’s full name-“

    More Info:📚

    Headshot Alt Text

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🎆🎊🪅

    0

Please log in to post a comment

Log in with GitHub

Join 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