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;
}```