couleurs

 9 vignettes d'images au ratio 16/9 dans ce montage, modifiable selon vos choix. Clic sur chaque vignette pour lancer l'animation de 10 secondes.

Des images colorées sont préférables dans ce montage.

<div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left;">
<input id="cl1" class="cl" src="http://ekladata.com/zM2v8GaEsWxQaUmBmpm8cUcYmKo.jpg" type="image" />
<input id="cl2" class="cl" src="http://ekladata.com/TMpd5uxTwOL67HHZrmYnOUGcaVc.jpg" type="image" />
<input id="cl3" class="cl" src="http://ekladata.com/Vw9Vo91CLDV-nMDIThnnaHlAIAY.jpg" type="image" />
<input id="cl4" class="cl" src="http://ekladata.com/nUhMwvYZ0ibXCPQ4yFT1keSuWO4.jpg" type="image" />
<input id="cl5" class="cl" src="http://ekladata.com/HyD4QY_q0U5lT2kAkxGisZZFWLs.jpg" type="image" />
<input id="cl6" class="cl" src="http://ekladata.com/ndMzoncUS3K7i65xJb1QNtkHbOE.jpg" type="image" />
<input id="cl7" class="cl" src="http://ekladata.com/-iRZzmTKnokj0bMfY9Qj6c2xx94.jpg" type="image" />
<input id="cl8" class="cl" src="http://ekladata.com/RUCLfzBnV78pALaNpo6QgWMox2k.jpg" type="image" />
<input id="cl9" class="cl" src="http://ekladata.com/8cBzcRqX0gSabYIS_BB8ttvtHFw.jpg" type="image" />
</div>
<style><!--
.cl{position:absolute; z-index:1; width:300px; height:169px; border:2px solid white; box-shadow:4px 4px 8px black;background-size:cover; animation:couleur 10s linear 0.2s 1 normal; animation-play-state:paused;}
#cl1{transform:translate(0px,0px);}
#cl2{transform:translate(340px,0px);}
#cl3{transform:translate(680px,0px);}
#cl4{transform:translate(0px,180px);}
#cl5{transform:translate(340px,180px);}
#cl6{transform:translate(680px,180px);}
#cl7{transform:translate(0px,360px);}
#cl8{transform:translate(340px,360px);}
#cl9{transform:translate(680px,360px);}
@keyframes couleur{
0%{width:300px; height:169px; filter:hue-rotate(360deg);}
5%{width:1000px; height:563px; filter:hue-rotate(360deg); transform:translate(0px,0px);}
8% {width:1000px; height:563px;filter:hue-rotate(360deg); transform:translate(0px,0px);}
18% {width:1000px; height:563px;filter:hue-rotate(360deg); transform:translate(0px,0px);}
21% {width:1000px; height:563px;filter:hue-rotate(240deg); transform:translate(0px,0px);}
41% {width:1000px; height:563px;filter:hue-rotate(240deg); transform:translate(0px,0px);}
44% {width:1000px; height:563px;filter:hue-rotate(180deg); transform:translate(0px,0px);}
64% {width:1000px; height:563px;filter:hue-rotate(180deg); transform:translate(0px,0px);}
67% {width:1000px; height:563px;filter:hue-rotate(90deg); transform:translate(0px,0px);}
87% {width:1000px; height:563px;filter:hue-rotate(90deg); transform:translate(0px,0px);}
90% {width:1000px; height:563px;filter:hue-rotate(0deg); transform:translate(0px,0px);}
93% {width:1000px; height:563px;filter:hue-rotate(0deg); transform:translate(0px,0px);}
100% {width:300px; height:169px;filter:hue-rotate(0deg);}}
#cl1:focus,#cl2:focus,#cl3:focus,#cl4:focus,#cl5:focus,#cl6:focus,#cl7:focus,#cl8:focus,#cl9:focus{z-index:5; animation-play-state:running;}
--></style>