• Pour Caroline ... du nord !

    Notre amie américaine me demande un code pour 6 images, en 800x600px, qui passent du noir et blanc à la couleur; voici une proposition, avec une 7 ème photo en fond.

    J'ai utilisé mes premières essais de photos derrière pare-brise et elles ne sont pas nickel mais c'est pour le principe: survolez chaque vignette.

    J'ai perdu l'habitude de publier en pixel et en 800x600px, rapport 4/3.


    <div id="nc0"><img id="nc1" src="http://ekladata.com/HKW99j9I_8TBtlXQ8K4bHNRWyS4.jpg" alt="" /> <img id="nc2" class="nc" src="http://ekladata.com/uClJ54eaFWGncc2zXIPQqgrR7GQ.jpg" alt="" /> <img id="nc3" class="nc" src="http://ekladata.com/1KK_CT9uG3OlwNVgqRSLzhQgZ1g.jpg" alt="" /> <img id="nc4" class="nc" src="http://ekladata.com/NFRVFJ9rwsbMeI3Hrz6IhGZLDvA.jpg" alt="" /> <img id="nc5" class="nc" src="http://ekladata.com/7EL7duzOw7XERK44lp2dv9Uqikw.jpg" alt="" /> <img id="nc6" class="nc" src="http://ekladata.com/yd6Dh7tupKoVXZqwsT4dgrqNWRg.jpg" alt="" /> <img id="nc7" class="nc" src="http://ekladata.com/xZpzw632grGG2pOZ_I82ZsNTxVE.jpg" alt="" /></div>

    <style><!--
    #nc0{width:800px; height:600px; margin:0px auto;}
    #nc1{position:absolute;z-index:1; width:800px; height:600px;}
    .nc{position:absolute; z-index:5; width:100px; height:75px; border:3px solid white; filter:grayscale(1); -webkit-filter: grayscale(1); transition:all 1s linear;}
    #nc2{transform:translate(10px,10px);}
    #nc3{transform:translate(10px,100px);}
    #nc4{transform:translate(10px,200px);}
    #nc5{transform:translate(690px,10px);}
    #nc6{transform:translate(690px,100px);}
    #nc7{transform:translate(690px,200px);}
    #nc2:hover, #nc3:hover, #nc4:hover, #nc5:hover, #nc6:hover, #nc7:hover{z-index:10; transform:translate(0px,0px); width:800px; height:600px; border:none; filter:grayscale(0); -webkit-filter: grayscale(0);}
    --></style>