• Diaporama 32

    Survolez chaque vignette.

     

     

     

     

     

     

     

     

     

    <div id="fd">
    <p id="f1">&nbsp;</p>
    <p id="f2">&nbsp;</p>
    <p id="f3">&nbsp;</p>
    <p id="f4">&nbsp;</p>
    <p id="m1">&nbsp;</p>
    <p id="m2">&nbsp;</p>
    <p id="m3">&nbsp;</p>
    <p id="m4">&nbsp;</p>
    </div>

    <style type="text/css"><!--
    #fd{margin:10px auto; width:800px; height:600px; border:4px solid #398ebe; border 6px solid grey; outline: solid 4px #ffffff; outline-offset: 0px; box-shadow:8px 8px black;}
    #f1{position:absolute; transform:translate(0px,0px); width:400px; height:300px; background-color:yellow;}
    #f2{position:absolute; transform:translate(400px,0px); width:400px; height:300px; background-color:coral;}
    #f3{position:absolute; transform:translate(400px,300px); width:400px; height:300px; background-color:lime;}
    #f4{position:absolute; transform:translate(0px,300px); width:400px; height:300px; background-color:lightblue;}
    #m1{position:absolute; transition:all 1s linear; transform:translate(0px,0px); width:400px; height:300px; background:url('http://ekladata.com/P3Zpk9bbTwzocifMKP4cmYDVw_Q/DSCN6291f.jpg'); background-size:contain; opacity:0.5;}
    #m2{position:absolute; transition:all 1s linear; transform:translate(400px,0px); width:400px; height:300px; background:url('http://ekladata.com/jJFFGheAA3Hq6dR32J9scmLw5us/DSCN6294f.jpg'); background-size:contain; opacity:0.5;}
    #m3{position:absolute; transition:all 1s linear; transform:translate(400px,300px); width:400px; height:300px; background:url('http://ekladata.com/wg8nRykAN0c6-pTd7syeyn4G4_0/DSCN6306f.jpg'); background-size:contain; opacity:0.5;}
    #m4{position:absolute; transition:all 1s linear; transform:translate(0px,300px); width:400px; height:300px; background:url('http://ekladata.com/TTrTRl6EKgjdwTcd9t8tvrTWNYU/DSCN6311f.jpg'); background-size:contain; opacity:0.5;}
    #m1:hover, #m2:hover, #m3:hover, #m4:hover{z-index:5; transform:translate(0px,0px); width:800px; height:600px; opacity:1;}
    --></style>


    Même principe de construction que le précédent mais deux ou trois différences:

    L'entourage du montage est fait de deux couleurs et d'une ombre: couleur d'entourage:#398ebe; couleur extérieure:#ffffff; et une ombre noire sans flou.

    Une première "épaisseur" d'images (f1 à f4) sont des cadres remplis d'une couleur de fond.

    Une seconde "épaisseur" d'images (m1 à m4) à opacité moitié (opacity:0.5;).

    Le survol de chaque vignette la fait changer de taille, position et opacité; comme l'animation est la même pour toutes, une seule ligne de code.