NFT Preview card done with CSS grid

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.