NFT preview card component

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👍