• 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>