• Eki Eder

    Survolez les vignettes.

     

     

     

     

    La demande est pour 4 images en 800x600px; on peut ajouter une bordure au montage; on peut dimensionner, donner une forme (ronde ?) et positionner les vignettes à son gré.

    Si vous voulez ajouter des images, ajoutez, en html

    <p id="d5">&nbsp;</p>

    et ajoutez en CSS

    #d5{position:absolute; z-index:5; transform:translate(700px,180px); width:80px; height:60px; border:3px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/AYLwWZPsIhIwTpBOaFS8u7hJCaY.jpg'); background-size:cover; transition:all 1s linear;}
    #d2:hover, #d3:hover, #d4:hover, #d5:hover{position:absolute; z-index:10; transform:translate(0px,0px); width:800px; height:600px; border:none; box-shadow:none;}

     

    <div style="width: 800px; height: 600px; margin: 5px auto;">
    <p id="d1">&nbsp;</p>
    <p id="d2">&nbsp;</p>
    <p id="d3">&nbsp;</p>
    <p id="d4">&nbsp;</p>
    </div>
    <style><!--
    #d1{position:absolute; z-index:1; transform:translate(0px,0px); width:800px; height:600px; background:url('http://ekladata.com/8YR2FtNtpSehb-02vS7Mp09mfoY.jpg');}
    #d2{position:absolute; z-index:5; transform:translate(700px,20px); width:80px; height:60px; border:3px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/xIAh7VU7SXmVVErwi3EgatuS66s.jpg'); background-size:cover; transition:all 1s linear;}
    #d3{position:absolute; z-index:5; transform:translate(700px,100px); width:80px; height:60px; border:3px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/hBnOMbPFkHFRNUpWOyLGGbPskOg.jpg'); background-size:cover; transition:all 1s linear;}
    #d4{position:absolute; z-index:5; transform:translate(700px,180px); width:80px; height:60px; border:3px solid white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/AYLwWZPsIhIwTpBOaFS8u7hJCaY.jpg'); background-size:cover; transition:all 1s linear;}
    #d2:hover, #d3:hover, #d4:hover{position:absolute; z-index:10; transform:translate(0px,0px); width:800px; height:600px; border:none; box-shadow:none;}
    --></style>