Responsive NFT preview card

Community feedback

• 

  Gediminas Makutenas•765

  @SenatriusPosted almost 2 years ago

  Nice work on this project! Only a few things to fix.

  • Overflow: there's no need to have the overflow: hidden on the body tag. With it, if you resize the window so it's smaller than the card, it just goes off screen with no way to see it. It's better to remove the overflow: hidden and have the scroll bars if they're needed, you never know what device a user views it on.

  • Unnecessary nesting: maybe I can't tell in the dev tools, but I don't think div.wrapper around the div.card does anything and can be removed. Ignore if I'm wrong here.

  • Headings: Use h1 instead of h2 and style the font size if needed. Never use heading tags for styling purposes.

  • Overlay on hover: to answer the question you asked about changing color on hover, you could use a separate absolute position div and style it based on whether the image container is being hovered or not. It would look something like this

  <div class="image">
      <div class="overlay">[add your icon or whatever you need here to show up on hover]</div>
      <img src="images/image-equilibrium.jpg" class="card__image" alt="product_image">
  </div>
  
  .image {
      position: relative;
  }
  
  .overlay {
      display: none;
      position: absolute;
      inset: 0;
      background: [color you want]
  }
  
  .image:hover > .overlay {
      display: block;
  }
  

  you can style the div however you like. or use some other tag if you want to it be clickable, it should work the same.

  Keep it up :)

  0