• Diaporama 31

    Survolez chaque vignette.
    Photos du 5 novembre 2015: un bien bel automne !

     

     

     

     

     

     

     

    <div id="mont">
    <p id="c1">&nbsp;</p>
    <p id="c2">&nbsp;</p>
    <p id="c3">&nbsp;</p>
    <p id="c4">&nbsp;</p>
    <p id="c5">&nbsp;</p>
    <p id="c6">&nbsp;</p>
    </div>
    <p>...<br>...</p>
    <style type="text/css"><!--
    #mont{position:relative; margin:10px auto; width:800px; height:600px; border:3px double white;}
    #c1{ position:absolute; transition:all 1s linear; transform:translate(0px,0px); width:396px; height:196px; border:2px solid white; background:url('http://ekladata.com/HeGsaGJLQ4RhRct5gJYf_VfwnbA/DSCN6293f.jpg'); background-size:auto;}
    #c2{ position:absolute; transition:all 1s linear; transform:translate(0px,200px); width:396px; height:196px; border:1px solid white; background:url('http://ekladata.com/va2W2vv3DkRNq0Q22muL7tvy5hA/DSCN6308f.jpg'); background-size:auto;}
    #c3{ position:absolute; transition:all 1s linear; transform:translate(0px,400px); width:396px; height:196px; border:1px solid white; background:url('http://ekladata.com/b5lQGl2NGtvuvjwNpG46o31yirU/DSCN6315f.jpg'); background-size:auto;}
    #c4{ position:absolute; transition:all 1s linear; transform:translate(400px,0px); width:396px; height:196px; border:2px solid white; background:url('http://ekladata.com/511Ya9lfePYWAEUkrbpBJlDtwqU/DSCN6329f.jpg'); background-size:auto;}
    #c5{ position:absolute; transition:all 1s linear; transform:translate(400px,200px); width:396px; height:196px; border:1px solid white; background:url('http://ekladata.com/qFA5ay0GT0bQjV3r8zf3u4_ilsk/DSCN6304f.jpg'); background-size:auto;}
    #c6{ position:absolute; transition:all 1s linear; transform:translate(400px,400px); width:396px; height:196px; border:1px solid white; background:url('http://ekladata.com/zc0XnS1lmRLV_lLwsOOdyuTQAws/DSCN6319f.jpg'); background-size:auto;}
    #c1:hover, #c2:hover, #c3:hover, #c4:hover, #c5:hover, #c6:hover{z-index:5;transform:translate(0px,0px); width:800px; height:600px; border:0px;}
    --></style>
    Chaque vignette est placée indépendamment des autres et à part ce positionnement et l'adresse de l'image de  fond, le code est le même.
    Vous remarquerez la dernière ligne: comme chaque vignette reçois la même animation au survol, au lieu d'écrire une ligne pour chacune, on peut utiliser cette écriture.