• Diaporama 33

    Je propose souvent des montages pour trop d'images alors en voici un pour 3 images en 800x600px.

    Survolez les images.

     

     

     

     

    <div id="fond">
    <p id="co">Survolez les images.</p>
    <p id="img1">&nbsp;</p>
    <p id="img2">&nbsp;</p>
    <p id="img3">&nbsp;</p>
    </div>


    <style type="text/css"><!--
    #fond{position:relative; margin:10px auto; width:800px; height:600px; text-align:center; font-size:15pt; background:url(http://ekladata.com/S_cGA68ClBc26Ct7RJO9Jni-gCw/2336.jpg); border:2px solid brown; overflow:hidden;}
    #co{position:absolute; z-index:1; width:300px; transform:translate(250px,10px); text-align:center;}
    #img1{position:absolute; transform:rotatex(70deg) perspective(500px) translate(100px,-300px); transition:all 2s linear; width:600px; height:450px; border:4px solid white; background:url(http://ekladata.com/p4DgTKfRMFYoZDBTakGK7z5DA3Y/DSCN6359.jpg);}
    #img1:hover{transform:rotate(0deg) translate(0px,0px); z-index:2; width:800px; height:600px; border:0px;}
    #img2{position:absolute; transform:rotatex(70deg) perspective(500px) translate(100px,155px); transition:all 2s linear; width:600px; height:450px; border:4px solid white; background:url(http://ekladata.com/JbMLTCz5L6w8rjjEGrcFxDVW9QY/DSCN6360.jpg);}
    #img2:hover{transform:rotate(0deg) translate(0px,0px); z-index:2; width:800px; height:600px; border:0px;}
    #img3{position:absolute; transform:rotatex(70deg) perspective(500px) translate(100px,614px); transition:all 2s linear; width:600px; height:450px; border:4px solid white; background:url(http://ekladata.com/Q2T8d80UwS2jo0u4fBck7uSRftg/DSCN6361.jpg);}
    #img3:hover{transform:rotate(0deg) translate(0px,0px); z-index:2; width:800px; height:600px; border:0px;}
    --></style>