NFT Preview card done with CSS grid

Community feedback

• 

  Luis Jimenez•760

  @LuisJimenez19

  Posted almost 2 years ago

  Hi, congratulations on finishing the challenge.

  In order to achieve the effect you should use another layer, and instead of using a <img/> element to display the image you can use it as the background of the <picture> element. something like that:

  
      <section class="card__image">
        
        <a class="card__image__active" href="#">
          
           <div> 
            <img class="icon-view" src="./images/icon-view.svg" alt="img">
           </div>
  
        </a>
  
      </section>
  
  

  The <section> element replaces the <picture> element

  and in the CSS:

  .card__image{
    background-image: url(../images/image-equilibrium.jpg); // image url
  
  .card__image__active{
  
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background:radial-gradient(circle, hsla(178, 100%, 50%, 0.1) 0%,hsla(178, 100%, 50%, 0.3) 100%);
      opacity: 0;
      transition: opacity .5s linear;
      border-radius: 10px;
      
  
  .card__image:hover > .card__image__active {
          opacity: 1; /* set it to full opacity so the icon keeps its original color */
          cursor: pointer;
      }
  }
  
  

  I hope my contribution is helpful.

  10

  Marked as helpful