Desafio NFT preview

Community feedback

• 

  Anderson Fernandez•350

  @anderson-fndzPosted about 1 year ago

  opa eai mano, para solucionar esse problema do hover é simples:

  • da uma conferida no meu projeto
  • criar uma div para colocar dentro a imagem da NFT e um container ou span onde dentro teria o svg, vai ficar algo assim no HTML:

  
  <div class="view"> [div para agrupar tudo]
  
    <span class="view-content"> [span para o svg, onde vai ser da cor ciano de fundo]
         <img id="img-eye" src="images/icon-view.svg" alt="view">  [o svg em forma de olho]
    </span>
  
    <img class="img-nft" src="images/image-equilibrium.jpg" alt="image NFT">  [a imagem NFT]                 
  
  </div>
  

  • e a partir dai você aplica os estilos, para poder sobrepor e ficar um em cima do outro vai ter que usar o position; absolute no span.viewcontent e um position: relative na div pai dessa, na div.view e ai mexer no css usando hover e opacity :

  view {
      position: relative;
      width: 300px;
      height: 300px;
  }
  
  .img-nft {
      width: 300px;
      border-radius: 8px;
  }
  
  .img-nft:hover {
      opacity: 50%;
  }
  
  .view-content {
      opacity: 0%;
      position: absolute;
      background-color: #00e8e461;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
  }
  
  .view-content:hover{
      opacity: 100%;
  

  espero ter ajudado

  Marked as helpful

  0

  ---

  

  Eduardo Reis•40

  @EduardoReisMSPosted about 1 year ago

  @anderson-fndz Muito obrigado! Vendo a solução, chega a ser engraçado e simples de fazer, mas foi algo que realmente não passou pela minha cabeça.

  0