NFT preview card component

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="card"> with the main tag, <h2> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

  To center .card on the page using flexbox, add min-height: 100vh to the body and remove padding value in the body.

  Give .card a fixed max-width value for a responsive content.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  hammzyy•30

  @hammzyyPosted almost 2 years ago

  i appreciate your feedback, thank you. any suggestion on how i can put an image over another image with the visibility affected by hover property in css?

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @hammzyy

  Wrap the img tags in a div and the img tag containing the eye icon in a div with a class of overlay. <div class="nft-image"><img class="eq"><div class =" overlay"> <img class =" view"></div></div>

  In the css give .nft-image position: relative and width of 100%
  Give .eq a width 0f 100% and display: block. give .overlay position: absolute, top: 0, left: 0, bottom: 0, right: 0, background-color of cyan and opacity of 0. Give .eq: hover .overlay opacity 0f 0.9

  .nft-image{
  position: relative;
  width: 100%;
   }
  .eq{
  width: 100%;
   display: block;
  border-radius: ;
  }
  .overlay{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
   background-color: hsl();
  opacity: 0;
  }
  .view{
  position: absolute;
   top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
   eq:hover .overlay{
  opacity: 0.9;
  }
  

  Hope am helpful

  0