Skip to content
Submitted over 2 years ago

This project is built using some basic HTML and CSS.

Mathi Alagan•10
@Mathi-Alagan
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

The tricky part was designing the hovering state of the nft-image, where while hovering the image it should display a translucent cyan color with a icon-view svg at the middle of it. I created a div with the size of the image, inside it kept the icon-view svg. It was set to appear while hovering the nft-image, also I set the cursor to pointer to make it seem like hovering a link. I'm unsure if this technique is good or not. Please suggest me an efficient method where it would be understandable and accessible for all type of users.

Also, please review my code and suggest me your valuable points to improve it more.

Community feedback

  • riverCodes•300
    @riverCodesPosted over 2 years ago

    Hi, good job on the challenge. Your code is clean and well commented :). For feedback,

    1. Regarding the image overlay, you have almost got it. Your hover transition isn't applied to when the :hover falls off. But most importantly, you need to wrap the <img> in a <a> tag and redirect to wherever you wish to on click. A better approach would be to use <img> pseudo elements.
    • First, wrap with <a>
    • Set <img> display to block.
    • Use img::before as the color overlay and img::after as the eye-icon.
    • position: relative on the img and position: absolute on the pseudo elements.
    • in ::before, set content: "" (empty string), and in ::after, set content: url(eyeicon.svg). style these appropriately.
    • position the ::before to take up 100% of <img> and ::after to sit in the center. Use z-index property to fix any layering issues
    • Next, you should apply the styles on hover (img:hover::before and img:hover::after). (pseudo classes are indicated by : and always go before pseudo elements, indicated by ::, if they are used together)
    • Use opacity: 1; and on the non-hovered states, opacity: 0; Put the transition property on the non hovered state.
    1. You probably want to center your main component vertically on the page. To do this, apply the following styles to your <body>
    • min-height: 100vh; (this forces your <body> tag height to be 100% of the viewport height, by default element heights depend upon the inner content size, unlike width.)
    • display: flex;
    • flex-direction: column;
    • justify-content: center;
    1. To fix your Accessibility and HTML issues,
    • change the div that contains the entire card to a <main> tag. Always have a main tag for the main content of your page.
    • Always use one <h1> element on the page.
    • one of your images doesn't have an alt tag. always put alt tags, and leave them empty if they are decorative.

    Pretty long comment, hopefully it helps you :D Good luck

    Marked as helpful
    1

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