-
Art.19.2.22
Utilisation du filtre noir et blanc/couleur sur 4 images en 1000x563, ratio 16/9.
Survol jusqu' à color ation.
**********
Dimensionnez votre cadre et vos images à votre convenance en modifiant largeur/hauteur et @1000x593
<div style="width:1000px; height:563px; margin:25px auto; text-align:left;">
<p id="svl">Survol jusqu'à coloration.</p>
<img id="cath1" class="cath" src="http://ekladata.com/RIcugyIPJlYjjGMCoaB7Jiipm5U@1000x563.jpg">
<img id="cath2" class="cath" src="http://ekladata.com/b116F48JE6D6WEOf8Ig_zF_UBeU@1000x563.jpg">
<img id="cath3" class="cath" src="http://ekladata.com/6VlJ1AI_1_WjH7IYrPRDk-peJzs@1000x563.jpg">
<img id="cath4" class="cath" src="http://ekladata.com/jxDU1Rf7fly2e_kajhJQGKkrDl8@1000x563.jpg">
</div>
<style><!--
#svl{position:absolute; z-index:1; width:100px; height:auto; text-align:center; font-size:25px; transform:translate(450px,0ox);}
.cath{position:absolute; z-index:1; width:450px; height:253px; webkit-filter:grayscale(1); filter:grayscale(1); transition:all 1s, filter 1s 1s;}
#cath1{transform:translate(0px,0px);}
#cath2{transform:translate(550px,0px);}
#cath3{transform:translate(550px,310px);}
#cath4{transform:translate(0px,310px);}
#cath1:hover,#cath2:hover,#cath3:hover,#cath4:hover{z-index:5; width:1000px; height:563px; webkit-filter:grayscale(0); filter:grayscale(0); transform:translate(0px,0px);}
--></style>