NFT Card challenge using flex box

Community feedback

• 

  Heli0s•670

  @zeerobit

  Posted over 3 years ago

  Hi Martha, here are a few pointers:

  • You don't necessarily need to wrap the equilibrium image in 2 divs instead use one of the divs to also wrap the icon-view image. Here is an example:

  <div class="img__container">
          <a href="#">
            <img src="images/image-equilibrium.jpg" class="eq__img" alt="" aria-hidden="true" />
          </a>
          <div class="overlay">
            <a href="#"><img src="images/icon-view.svg" alt="" aria-hidden="true" / class="icon-view"></a>
          </div>
  </div>
  

  • In order to get the hover effect, add position relative to the image-container and on the overlay use position absolute so you can place the overlay on top of the image-container, convert the hsl background color to rgb [rgb(0, 255, 247, 0.4);] which lets you add the opacity for the transparency color effect, use flexbox to center the icon-view image then add opacity: 0; to hide the overlay. Then add opacity: 1; on hover so the overlay appears when you hover

  .overlay:hover {
    opacity: 1;
    cursor: pointer;
  }
  

  • ETH is missing the 0.041 in the front
  • The creator part can be wrapped in figure, figcaption instead of div for better semantics
  • Use rem instead of px since it's not scalable
  • Remove the height from .NFT-card, let the content dictates the height and use max-width instead of width
  • You don't need to add width: 275px on each section to prevent them from touching the edges, simply add a padding on the container to achieve that
  • For images you just need to add max-width: 100%; and display: block; and not a set width and height
  • I'd suggest you to add a css reset in your stylesheet to avoid any weird browser behaviors, i use this css reset

  Hope these help, Happy coding !!!

  01

  Marked as helpful
• 

  shahidafridi23•350

  @shahidafridi23

  Posted over 3 years ago

  Hi @marthaeason , you did a good job on this challenge, for hover state add HTML and style before, with opacity 0 and then add hover state with opacity 1, hopefully, this will work.

  00

  Marked as helpful