NFT Preview Card using Adjacent-Sibling Selector

Community feedback

• 

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  Hi @braien-machado

  You can put a hover on the img-container to show the eye icon and cyan background as a pseudo element. Something like...

  <div class="img-container">
      <img src="./images/image-equilibrium.jpg" alt="equilibrium" class="card-img">
  </div>
  

  .img-container {
      position relative;
  }
  
  .img-container::before {
      content: '';
      background: url('./image/icon-view.svg') center no-repeat hsla(178, 100%, 50%, 0.5);
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 100;
      visibility: hidden;
      opacity: 0;
      transition: visibility 0.3s, opacity 0.3s;
  }
  
  .img-container:hover::before {
      visibility: visible;
      opacity: 1;
  }
  

  Here's a similar example

  Hope that helps 👍

  Marked as helpful

  1

  ---

  

  Braien Machado de Paula•20

  @braien-machadoPosted almost 3 years ago

  @byronbyron , thanks for the reply! I'm not used to pseudo elements, so it's great to see this way to solve my problem.

  0

  

  Byron•2,290

  @byronbyronPosted almost 3 years ago

  @braien-machado Happy to help, dude!

  0