Skip to content
Submitted over 2 years ago

Responsive CSS card

Aditya Raj Sharma•10
@Rebooting-Me
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 found that including the eye on image hover without the reduced opacity to be quite hard and am unsure of how I could implement it.
  • Also I am a newbie in responsive design so if anyone can point me out to the right resources to learn it I would really appreciate that!

Community feedback

  • riverCodes•300
    @riverCodesPosted over 2 years ago

    Hi, okay, good job on the challenge. Well done on the card-content layout. For feedback,

    1. To fix your Accessibility and HTML issues,
    • change the div that contains the entire card (and only the card) to a <main> tag. Always have a main tag for the main content of your page. Keep the div.attributions (footer) outside of the main tag. You should change that div to a <footer> tag as well.
    • Always use one <h1> element on the page.
    1. Once you do the above, your <main> and <footer> will need to be centered. Using position: absolute to center stuff isn't ideal as it lifts it up from the Flow Of The Document. Other elements that you put on the page will ignore the former and slip underneath it. You should try this approach instead. 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;
    • align-items: center; (bonus: if u want to push the footer to the bottom of the page, while keeping your main centered check this resource out https://every-layout.dev/layouts/cover/
    1. For the image overlay effect, you need to first wrap your image in a <a> tag. This is what will redirect users to whatever you want on clicking the image. You have already done this for the title, do the same for the <img>.
    • 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.

    Aaaaaand that should be it, hope this helps! let me know if you have any doubts, and good luck :)

    Marked as helpful
    1
    Aditya Raj Sharma•10
    @Rebooting-MePosted over 2 years ago

    @riverCodes Oh, I see!! Thank you so much for the feedback. I will try to edit the changes!

    1
  • riverCodes•300
    @riverCodesPosted over 2 years ago

    Hi, your live site isn't up! Could you check it out, I'll be able to help you out then! :)

    0
    Aditya Raj Sharma•10
    @Rebooting-MePosted over 2 years ago

    @riverCodes Hey thanks for reaching back. Yeah, the site was buggy but now I have updated the link. Should work now. And waiting for the feedback. Thanks in advance!

    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