Skip to content
Submitted over 3 years ago

HTML, CSS flexbox & overlay with absolute and relative positioning

Fahim Mahmud•165
@FahimMahmudJoy
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I really had a hard time with the overlay image and had to resort to absolute and relative positioning along with flexbox. Is there a better way to achieve overlay using only flexbox? I admit that I had to resort to some hack-y approaches, specially for the overlay image and getting it in center. Any thoughts are most welcome!

Code

Please log in to post a comment

Log in

Community feedback

  • Hexer•3,620
    @EmmanuelHexer

    Great job overall man.

    • To fix your accessibility issues wrap your card with main element.
  • Heli0s•670
    @zeerobit

    Good work on completing this challenge, here are a few pointers:

    • the images should also be wrapped in anchor tag since they're supposed to be interactive elements
    • don't necessarily need a min-height for the main tag, let the content dictates the height instead
    • remove width: 18rem; from ".main-logo" instead make it max-width: 100% so the image can scale
    • no need to set a width on ".main-logo" and ".content", in your main tag change padding: 0.5rem 0; to something like `padding: 1.5rem;' and that will keep the content from hitting the corners
    • in your ".overlay-container" remove the min-height and add height: 100% , switch the background-color to rgb so you can add the opacity value to get the transparency effect, it should be like this background-color: rgb(0, 255, 247, 0.4);
    • in ".overlay-container:hover" remove the background-color and change the opacity to 1
    • to center the eye image you don't need to use position property, simply make ".overlay-container" display: flex then add align-items: center; justify-content: center;

    Hope this helps, Happy coding!!!

  • Naveen Gumaste•10,420
    @NaveenGumaste

    Hay ! Fahim Good Job on challenge

    These below mentioned tricks will help you remove any Accessibility Issues

    -> Add Main tag after body <main class="container"></main>

    -> Learn more on accessibility issues

    If this comment helps you then pls mark it as helpful!

    Have a good day and keep coding 👍!

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