Animação Gif (Gif On Hover) - Ajuda com Código
Boa noite, prezados.
Gostaria, se possível, de uma ajuda.
SOU INICIANTE, ESTOU APRENDENDO A MEXER NO WORDPRESS.
Estou criando um site de vídeos, e preciso de uma dica quanto
à imagem destacada.
bom,
A imagem destacada do vídeo é uma Gif, porém, gostaria que essa gif
"ativasse" somente quando o mouse passasse por cima dela (Mouse over ou on Hover, não sei o correto)
Ex:
docs.embed.ly/docs/tutorial-play-and-stop-gifs
Até o momento, eu fiz o seguinte:
- No arquivo Header.php, eu coloquei o seguinte código
<Head>
<script>
}).on('mouseleave', function(){
var $this = $(this);
// Make sure the load function knows we are no longer in a hover state.
$this.data('hover', false);
// Remove the spiner if it's there.
$this.find('.gif-loading').remove();
// Set the src to the static url.
$this.find('img.gif-holder').attr('src', $(this).data('static_url'));
});
</script>
<style type="text/css">
.gifs a {
position: relative;
display: block;
}
.gif-preload {
display: none;
}
.gif-loading {
position: absolute;
width: 40px;
height: 40px;
font-size: 40px;
color: #fff;
top: 0;
left: 0;
}
</style>
</head>
- No arquivo Function.php, coloquei o seguinte código:
<?php
the_post_thumbnail('post-thumbnail', array('class' => 'gifs attachment-post-thumbnail'));
?>
DUVIDAS:
1ª- Os códigos estão certos ??
2ª- Onde colocar esses códigos ?
Abraços.
Aguardo uma ajuda.
Discussão (0)
Carregando comentários...