NFT Card Component

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace the section tag <section> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  There is no need to give the body a width value. To center the section/main on the page using flexbox, replace the height in the body with min-height: 100vh.

  For the overlay. give . preview-container a max-width of 100% a position relative, give . overlay position absolute, top, right ,left and bottom value of 0 background-color of cyan, opacity of 0. Give img:hover .overlay{ opacity: 0.9} and .overlay >img{ position: absolute; left: 50%, right: 50% transform: translate(-50%, -50%)}

  .preview container{
  position: relative;
  max-width: 100%;
  }
  .overlay{
  position: absolute;
  top:0;
  left: 0;
  right:0;
  bottom:0;
  background-color: hsl(cyan);
  opacity: 0;
  }
  .overlay >img{
   position: absolute; left: 50%, right: 50% transform: translate(-50%, -50%)}
  
   img:hover .overlay{ opacity: 0.9}
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1
• 

  Corvida Raven•680

  @SheGeeksPosted almost 2 years ago

  Hey Nikkehtine. I would suggest changing your background-color for the overlay to something like hsla(178.1, 100%, 50%, 0.5). You're missing the alpha value for your color. You can adjust the last value in the color code to adjust the transparency. Any value under 1 will give you a transparent effect.

  1