NFT Equilibrium Card

Community feedback

• 

  Kuraanal•210

  @KuraanalPosted over 1 year ago

  there is many way to make the overlay. Best is very subjective..

  One could be a container like this with the overlay opacity set to 0 and change to 0.5 on hover (Same for the view icon):

  <div class="card__image">
  <img src="./assets/images/image-equilibrium.jpg" alt="NFT preview" />
  <div class="image__overlay"></div>
  <img src="assets/images/icon-view.svg" class="overlay__icon" alt="" />
  </div>
  

  .image__overlay {
  position: absolute;
  inset: 0 0 0 0;
  background-color: var(--your-clr);
  }
  

  Or you can just pout the image like this, and use the CSS pseudo element ::before and ::after to make the overlay.

  <div class="card__image">
  <img src="./assets/images/image-equilibrium.jpg" alt="NFT preview" />
  </div>
  

  .card__image::after,
  .card__image::before {
  position: absolute;
  opacity: 0;
  }
  
  .card__image::before {
  content: '';
  inset: 0 0 0 0;
  background-color: var(--overlay-clr);
  }
  
  .card__image::after {
  content: url(../images/icon-view.svg);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  
  .card__image:hover::before,
  .card__image:hover::after {
  opacity: 0.5;
  }
  

  Marked as helpful

  0

  ---

  

  BrunoMoleta•700

  @brunomoletaPosted over 1 year ago

  @Kuraanal Thanks for explaining the pseudo element :)

  0