NFT preview card component

Community feedback

• 

  Deborah Robbiano•600

  @debriksPosted about 2 years ago

  Hi Sinka,

  Maybe you could try to place this code, just after your <main> element in the HTML code :

  <div class="card__banner"> <img src="images/image-equilibrium.jpg" alt="equilibrium" class="card__img" /> <div class="overlay"> <img src="images/icon-view.svg" alt="view" /> </div> </div>

  What is important here is to wrap your icon in a <div> element with a class of '.overlay'

  And then the CSS:

  .card .overlay { position: absolute; inset: 0; height: 100%; width: 100%; background-color: hsla(178deg, 100%, 50%, 0.5); visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.2s linear; }

  .card .overlay img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

  .card__banner:hover .overlay { opacity: 1; }

  Hope this helps!

  Happy coding!

  Marked as helpful

  2
• 

  Sinka László•470

  @dlxzeus777Posted about 2 years ago

  Any idea on how can I solve the hover state on the image?

  0