nft-preview-card

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 2 years ago

  Hi there, Madeleine De Guzman! 👋

  Great work on this challenge! 👍

  There are different ways to create an image overlay with CSS. One way is to put both the image and overlay element in a container and use absolute positioning to make the overlay element fill up its container and cover the image.

  <div class="container">
    <img />
    <div class="overlay" />
  </div>
  

  .container {
    position: relative;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  

  That way, the container will be sized by the image inside of it and the overlay will fill up its container even if the size of that container changes. 😉

  Here's a nice article from LogRocket's blog on this subject for you to check out if you're interested in learning more.

  Hope you find this helpful. 😊

  Keep coding (and happy coding, too)! 😁

  0

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 2 years ago

  One more thing you can do to make your solution more responsive is set width="100% on the card and then add a fixed max-width to it to prevent it from becoming too wide when the size of its parent element increases. That way, it should be a good size for most screen sizes but automatically shrink when there is not enough space around it, and you won't have to use a media query to change its width. 😉

  0