NFT preview card component using html and css only

Community feedback

• 

  Parves Hossain Rabby•560

  @IamparvesPosted almost 3 years ago

  Hello @ijyotimaurya150,

  You can take an image element for the eye icon inside your nft-image div and position it using position: absolute;. Then you just need to make it's opacity 0 for normal state and 100% for hover state of the image.

  Or you can take a completely different approach. And try to do it using CSS Pseduo Element. For example you can do it like this:

  .nft-image {
      position: relative;
      overflow: hidden;
      cursor: pointer;
  }
  
  .nft-image::before {
      content: url(images/icon-view.svg);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: hsla(178, 100%, 50%, .5);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: .5s ease;
  }
  
  .nft-image:hover::before {
      opacity: 1;
  }
  

  And for the ETH and days icon/text aligning, you can do it using flex. I don't know if there is any better way to do it. But I like to use flexbox to align icons with text. This is what I did for my solution:

  HTML

  <div class="card__info">
       <div>
         <img src="images/icon-ethereum.svg" alt="">
         <h2>0.041 ETH</h2>
       </div>
       <div>
         <img src="images/icon-clock.svg" alt="">
         <p>3 days left</p>
       </div>
  </div>
  

  CSS

  .card__info {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  .card__info>div {
      display: flex;
      align-items: center;
  }
  

  And you should make your card a little bit larger and the background color you used isn't the same as the original design.

  I hope this helps.

  0