Skip to content
Submitted about 2 years ago

NTF Preview Card Component

Roman•60
@r0mankeys
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

I unfortunately was unable to complete this challenge exactly perfectly (the eye svg activated when hovered) and would greatly appreciate feedback on my code and how others who have tried this managed to make it happen with plain CSS

Community feedback

  • Asmaa Elfatayry•870
    @asmaa-elfatayryPosted about 2 years ago

    Hi, Roman

    you do a great job to make the eye SVG when you hover you simply can make a div and put the SVG image or icon give the style with position or any style you want and finally make the div display none and when hover the display will be block

    I will leave you some sources I hope the sources will clarify for you more:

    https://www.geeksforgeeks.org/how-to-create-image-overlay-hover-using-html-css/

    https://tutorialdeep.com/knowhow/create-image-hover-overlay-effect-css/#:~:text=The%20short%20answer%20is%3A%20use%20the%20CSS%20property,Create%20Image%20Hover%20Overlay%20Effect%20Transparent%20Using%20CSS

    0
  • バレンタイン 😈•64,190
    @VCaramesPosted about 2 years ago

    Hey @r0mankeys, some suggestions to improve you code:

    • Here is a link that will teach you how to apply the overlay effect:

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

    • To give you HTML code structure, you want to set up your code in the following manner (only did parent containers):
       <body>
        <main>
          <article></article>
        </main>
      </body>

    The Main Element identifies the main content of the document.

    While the Article Element will serve as the card’s container, because the card represents a complete, or self-contained, section of content that is, in principle, independently reusable.

    More info:

    https://web.dev/learn/html/headings-and-sections/

    • The NFT Alt Tag description needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.

    • The Section Element is being used incorrectly and not needed for this challenge; a simple Div will do.

    • Wrap the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an Anchor Tags <a>. The anchor tag will allow users to click on content and have them directed to another part of your site.

    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