Submitted over 1 year ago

NTF Preview Card Component

Roman• 40

@r0mankeys

Preview site View code

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

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-elfatayry

Posted over 1 year 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

バレンタイン 😈• 64,190

@VCarames

Posted over 1 year 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! 👻🎃

Please log in to post a comment

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