Vid/gif/survol

Un complément d'explication sur les images fixes qui s'animent au survol.

Voici 2 petites vidéos (1seconde) d'environ 3Mo au format MOV.

Convertie au format Gif, sur http://image.online-convert.com, au format 690x388px, elles pèsent 2.6Mo et 3.2Mo.

A partir de ces gifs, ouverts par un logiciel de traitement d'images, j'ai tiré la première image (143ko et 168ko), au format jpeg.

Ce petit monde a été hébergé sur Ekla et leurs adresses respectives récupérées puis placées dans les codes.

Voici une image fixe et le gif correspondant:

Il ne nous reste plus qu'à placer l'image fixe sous l'image animée, à rendre l'image animée transparente (opacity:0;) et à la rendre opaque (opacity:1;) au survol, avec un code du genre, où l'image fixe est placée en fond de boîte.

<p id="z1a"><img id="z1b" src="http://ekladata.com/7h8GIEjA1Z-grTQYV-l7g-A6MjQ.gif"></p>
<style><!--
#z1a{width:690px; height:388px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/LL37_xAXiRJF-dkRzEqU5W4sWh0.jpg');}
#z1b{opacity:0; transition:all 1s linear;}
#z1b:hover{opacity:1;}
--></style>

Une autre écriture nous permet des décorations différentes.

<p id="z2a"><img id="z2b" src="http://ekladata.com/ymZ1mO6Ef7kuhudQ9cnGkYR6wwg.jpg" alt="" /> <img id="z2c" src="http://ekladata.com/UHXN5KFLsRIsGNb50j3eb0wqC_4.gif" alt="" /></p>
<style><!--
#z2a{width:690px; height:388px; margin:0px auto; border:4px ridge white; border-radius:50%; box-shadow:4px 4px 6px black; }
#z2b{position:absolute; width:690px; height:388px; border-radius:50%;}
#z2c{position:absolute; width:690px; height:388px; opacity:0; transition:all 1s linear; border-radius:50%;}
#z2c:hover{opacity:1;}
--></style>