-3

Salve galera, estou fazendo um projeto para a faculdade usando HTML, CSS e Javascript, porém, eu fiz alguns painéis e coloquei alguns gifs, preciso que os gifs comecem inativados, ou seja, estáticos, como se você abrisse no google, e quando passe o mouse por cima ele rode o gif, porém, quero que quando ele tire o mouse novamente ele pare o gif e volte ao estado inicial, sem ele rodar o gif.

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Projeto Charlie</title>
        <link rel="stylesheet" href="style3.css">
    </head>
<body>
  <div class="gallery">
    <a target="_blank" href="galeria/Gif_Luffy.gif">
      <img src="galeria/Gif_Luffy.gif" alt="Luffy" width="600" height="400">
    </a>
    <div class="Luffy">Monkey D. Luffy</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="galeria/Gif_Zoro.gif">
      <img src="galeria/Gif_Zoro.gif" alt="Zoro" width="600" height="400">
    </a>
    <div class="Zoro">Roronoa Zoro</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="galeria/Gif_Nami.gif">
      <img src="galeria/Gif_Nami.gif" alt="Nami" width="600" height="400">
    </a>
    <div class="Nami">Nami</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="galeria/Gif_Usopp.gif">
      <img src="galeria/Gif_Usopp.gif" alt="Usopp" width="600" height="400">
    </a>
    <div class="Usopp">God Usopp</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="galeria/Gif_Sanji.gif">
      <img src="galeria/Gif_Sanji.gif" alt="Sanji" width="600" height="400">
    </a>
    <div class="Sanji">Vinsmoke Sanji</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="galeria/Gif_Chopper.gif">
      <img src="galeria/Gif_Chopper.gif" alt="Chopper" width="600" height="400">
    </a>
    <div class="Chopper">Chopper</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="galeria/Gif_Robin.gif">
      <img src="galeria/Gif_Robin.gif" alt="Robin" width="600" height="400">
    </a>
    <div class="Robin">Nico Robin</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="galeria/Gif_Franky.gif">
      <img src="galeria/Gif_Franky.gif" alt="Franky" width="600" height="400">
    </a>
    <div class="Franky">Franky</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="galeria/Gif_Brook.gif">
      <img src="galeria/Gif_Brook.gif" alt="Brook" width="600" height="400">
    </a>
    <div class="Brook">Brook</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="galeria/Gif_Jimbe.gif">
      <img src="galeria/Gif_Jimbe.gif" alt="Jimbe" width="600" height="400">
    </a>
    <div class="Jimbe">Jimbe</div>
  </div>
  
  <div class="gallery">
    <a target="_blank" href="galeria/Eren Yeager.png">
      <img src="galeria/Eren Yeager.png" alt="Eren" width="600" height="400">
    </a>
    <div class="Eren">Eren Yaeger</div>
  </div>
  
  <div class="gallery">
    <a target="_blank" href="galeria/Sukuna.png">
      <img src="galeria/Sukuna.png" alt="Sukuna" width="600" height="400">
    </a>
    <div class="Sukuna">Sukuna</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="galeria/Zenitsu.jpg">
      <img src="galeria/Zenitsu.jpg" alt="Zenitsu" width="600" height="400">
    </a>
    <div class="Zenitsu">Zenitsu</div>
  </div>
</body>
    </html>```

Meu CSS está externo!

```div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 200px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: width 2s, height 4s;
  }
  
  div.gallery:hover {
    border: 1px solid #777;
    width: 300px;
    height: 300px;
  }
  
  div.gallery img {
    width: 100%;
    height: auto;
  }
  
  div.Zenitsu {
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }
  div.Luffy {
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }
  div.Zoro {
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }
  div.Nami {
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }
  div.Usopp {
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }
  div.Sanji {
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }
  div.Chopper {
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }
  div.Robin {
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }
  div.Franky {
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }
  div.Brook {
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }
  div.Jimbe {
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }
  div.Eren {
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }
  div.Sukuna {
    padding: 15px;
    text-align: center;
    font-size: 20px;
  }```
1
  • Por favor, edite a pergunta para limitá-la a um problema específico com detalhes suficientes para identificar uma resposta adequada.
    – Comunidade Bot
    Commented 23/04/2022 às 12:55

2 Respostas 2

0

Uma maneira simples que eu encontrei de fazer isso seria assim:

  • Primeiro você deveria fazer uma cópia de todos os gifs.
  • Cada cópia deveria ser salva no formato jpg.
  • Ou seja cada foto teria um arquivo .gif e outro .jpg
  • Depois você teria que mudar no html todas as fotos para o formato .jpg
  • Criar um função no JS que acontece no momento de passar o mouse.
  • Nessa função você mude o src da foto para .gifs

Criei um exemplo que ilustra bem isso:

HTML

<img src="data:image/jpeg;base64,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" id="foto" alt="">

CSS

#foto {
  width: 300px;
}

JS

let foto = document.getElementById("foto")

foto.addEventListener("mouseenter", mudarFoto)

function mudarFoto() {
  foto.setAttribute("src", "https://gizmodo.uol.com.br/wp-content/blogs.dir/8/files/2021/02/nyan-cat-1.gif")
}

Lembrando que essa é apenas uma maneira de fazer isso.

-2

A maneira mais simples é inserir uma imagem no formato jpeg que represente o estado pausado do gif sobrepondo o gif real e alterar a opacidade da prévia para 0 quando o usuário passar o mouse sobre a imagem usando a pseudo-classe hover.

.previa {
  position:absolute;
  background: white;
}

.previa:hover {
  opacity:0;
}
<div>
  <img class="previa" src="https://lh4.googleusercontent.com/-gZiu96oTuu4/Uag5oWLQHfI/AAAAAAAABSE/pl1W8n91hH0/w140-h165-no/Homer-Static.png">
  <img src="https://lh4.googleusercontent.com/i1RprwcvxhbN2TAMunNxS4RiNVT0DvlD9FNQCvPFuJ0=w140-h165-no">
</div>

Essa forma de obter o primeiro frame do gif talvez possa ajudar: imagecreatefromgif

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 25/04/2022 às 14:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .