NFT-preview-card

Community feedback

• 

  hitmorecode•6,250

  @hitmorecodePosted about 1 year ago

  Nice well done. Just a few tips

  • You forgot to add the overlay and show it on hover
  • You have flexbox on the body and you have margin on the container. You can remove the margin on the container, flexbox is already keeping the card in the middle of the page

  Marked as helpful

  0

  ---

  

  Keo Lamola•60

  @KeoLamolaPosted about 1 year ago

  Hi @hitmorecode , Much appreciated. I honestly missed the part of hovering. Will work on it .

  0
• 

  Riki Wendri•1,380

  @F4YYPosted about 1 year ago

  Hi @OekPhlesym,

  Congratulations on successfully completing the challenge, you did very well...

  There is improvement room to make it closer to the given design. Which is appearance of the eye icon overlaying above the equilibrium image when hovering. You can set overlay component and make its absolute position, also set relative position of the image container.

  Then insert it in HTML & CSS, the code snippet could be like this, you might adjust it as you like:

  in HTML:

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

  in CSS:

  .avatar {
     display: flex;
     position: relative;
     justify-content: center;
     align-items: center;
     height: 60%;
     width: 100%;
  }
  .overlay{
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     opacity: 0;
  }
  .overlay: hover{
     opacity: 1;
     background: hsl(178, 100%, 50%, 0.5);
  }
  

  Hope that could be Helpful. Keep happy coding...

  0

  ---

  

  Keo Lamola•60

  @KeoLamolaPosted about 1 year ago

  Hi @F4YY Thank a lot for your fora your input. I will sure make changes as well research more to fully grasp the concepts. Thanks

  0