Responsive NFT Preview Card with CSS Flexbox and Media queries

Community feedback

• 

  Bryan Li•3,530

  @Zy8712Posted 12 months ago

  Your site looks pretty good. Main things I think you should add/modify are:

  • adding a <main> tag around your page contents for accessbility purposes
  • alt tags are not necessary for images that are mainly for decorative purposes
  • adjusting your hover effect so the icon is at the middle and the cyan overlay doesn't exceed the image.

  How I did the hover effect was something along the lines of this:

  For the HTML:

  <div class="image-div">
     <img src="./images/image-equilibrium.jpg">
     <div class="curtain"></div>
     <img src="./images/icon-view.svg" alt="" class="curtain-icon">
  </div>
  

  For the CSS:

  .image-div img {
     max-width: 100%;
     height: auto;
     display: block;
  }
  
  .curtain {
     background-color: var(--Cyan);
     width: 100%;
     height: 100%;
     position: absolute;
     opacity: 0%;
     transition: opacity 0.25s;
  }
  
  .img-div:hover .curtain {
     opacity: 50%;
  }
  
  .curtain-icon {
     position: absolute;
     inset: 0;
     margin: auto;
     opacity: 0%;
     transition: opacity 0.25s;
  }
  
  .img-container:hover > a > .view-img {
     opacity: 100%;
  }
  

  Hope you find this feedback useful 👍

  1

  ---

  

  Clinton•100

  @eghosaclintonPosted 12 months ago

  @Zy8712 Thank you very much!! This is awesome...thanks for the tips as well!

  0