NFT preview card component

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted about 2 years ago

  Hey Sujeong, It looks good!... Here are some suggestions:

  • Document should have one main landmark, Contain the component with <main>.

  <main>
     <div class="card">
        //...
     </div>
  </main>
  

  • Use <a> to wrap Equilibrium #3429 and Jules Wyvern, then add cursor: pointer; to the <a>, The cursor indicates to users there is an action that will be executed when clicking on it.

  Equilibrium #3429 ---> Navigate the user to another page to see the NFT

  Jules Wyvern ---> Navigate the user to another page to see the creator's portfolio

  • To do the active state for the image on the NFT preview card I suggest you wrap the image of the NFT with the img-wrapper element and create another element to make it overlay on the image, it contains the view icon.

  <div class="img-wrapper">
        <img class="card-img" src="images/image-equilibrium.jpg" alt="Image Equilibrium">
        <div class="overlay"><img src="images/icon-view.svg" alt=""></div>
  </div>
  

  Then add the following styles:

  .img-wrapper {
    width: ...;  /* it's up to you */
    height: ...;  /* it's up to you */
    position: relative; /*To flow the child element on it*/
    cursor: pointer;
    overflow: hidden;
  }
  .img-wrapper .card-img{
    width: 100%;
    height: 100%;
  }
  .overlay {
    background-color: hsla(178, 100%, 50%, 0.5);
    display: flex;       /* Center the view icon with flexbox*/
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  .img-wrapper:hover .overlay {
    opacity: 1;
  }
  

  There is another way to do the active state for the image on the NFT preview card by creating pseudo-elements (::after, ::before) to use one as an overlay and other for view-icon.

  Resources

  • How to Center Anything with CSS - Align a Div, Text, and More
  • 11 Ways to Center Div or Text in Div in CSS
  • Pseudo-elements
  • ::after (:after)
  • ::before (:before)

  Hope this is helpful to you... Keep coding👍

  Marked as helpful

  0