[SOLUCIONADO] Dudas parar gif y play

[warywin]

Hola, se me plantean dos cuestiones mientras hago mi web y esque no se (de manera relativamente sencilla)

-Como mostrar un gif en pequeñito pero SIN que se reproduzca, y luego ya si quiere el usuario que le de click y se le abra en otra pestaña moviendose...estos a poder ser sin usar una foto fija del gif

-en una imagen que al pasar por encima se vea un icono de play encima de la imagen con un poquito de opacidad. Que propiedades o como lo tendria que hacer, he probado varias formas pero nada

Un saludo!

[pzin]

Para lo no reproducir un GIF, mediante CSS lo único que se me ocurre es que sean varias imágenes que luego vayas animando como necesites, pero pausar directamente un GIF creo que sólo podrás hacerlo usando JavaScript.

Lo de segundo es sencillo. Metes la imagen en un elemento, por ejemplo un div con posición relativa, ahí dentro pones dos imágenes, una de ellas sería la imagen del play a la cual le pones una posición absoluta. Luego es centrarla y darle opacidad.

[warywin]

Asi es como esta, pero no me va

Código HTML:

<li> <a href="plantilla.php"><img src="imagen1"><span>titulo</span>
               <div class="playvideo">Aqui va la imagen de play</div>
               </a>
 

Código CSS:

.playvideos{
    background:url(../images/play.png);
    position:absolute;
}
 

Pero esto esta mal porque lo que quiero es el hover que al pasar por imagen1 salga el play

[pzin]

Pues ocultas:

Código CSS:

visibility: hidden;
 

Y al pasar el mouse por encima del enlace, haces que sea visible:

Código CSS:

a:hover .playvideos {
  visibility: visible;
}
 

[warywin]

solucionado de una manera un poco bastante rara xD, puse <li class="video"> le meti el background nuevo y y le di opacidad a la img. pero no podia posicionar con margenes ni nada bien esa imagen dado que estab en <li> y se me quedaba en una esquina. luego dandole tamaño al lienzo conn phtsop cuadró pero a la fuerza xD