• pousse pousse

    Un petit amusement pour vous proposer un montage de 4 images en 800x600px; le survol de chacune, la fait s'afficher dans le cadre, en poussant les autres.

    Variantes possibles avec + ou - d'images, dans d'autres dispositions.

     

     

     

     

     

     

     

     

    L'écriture du code peut être simplifiée mais je préfère la laisser ainsi car plus claire, en ce qui concerne le positionnement au survol.

    <div id="cd">
    <p id="bt1">&nbsp;</p>
    <p id="bt2">&nbsp;</p>
    <p id="bt3">&nbsp;</p>
    <p id="bt4">&nbsp;</p>
    <p id="p1">&nbsp;</p>
    <p id="p2">&nbsp;</p>
    <p id="p3">&nbsp;</p>
    <p id="p4">&nbsp;</p>
    </div>
    <style><!--
    #cd{position:relative; width:800px; height:600px; border:4px ridge grey; overflow:hidden; margin:5px auto;}
    #bt1{position:absolute; z-index:10; width:200px; height:600px; transform:translate(0px,0px);}
    #bt2{position:absolute; z-index:10; width:200px; height:600px; transform:translate(200px,0px);}
    #bt3{position:absolute; z-index:10; width:200px; height:600px; transform:translate(400px,0px);}
    #bt4{position:absolute; z-index:10; width:200px; height:600px; transform:translate(600px,0px);}
    #p1{position:absolute; z-index:1; width:200px; height:600px; transform:translate(0px,0px); background:url('http://ekladata.com/TrJrNUZ3dglWkj3EmVzD-8fxEA4.jpg'); background-position:50% 50%; transition:all 1.5s linear;}
    #p2{position:absolute; z-index:1; width:200px; height:600px; transform:translate(200px,0px); background:url('http://ekladata.com/IUlFJfCVpFExXg9s_WPnpx4Dnvw.jpg'); background-position:50% 50%; transition:all 1.5s linear;}
    #p3{position:absolute; z-index:1; width:200px; height:600px; transform:translate(400px,0px); background:url('http://ekladata.com/JlpfpkxKMlSAPig_yrpFy9RqktE.jpg'); background-position:50% 50%; transition:all 1.5s linear;}
    #p4{position:absolute; z-index:1; width:200px; height:600px; transform:translate(600px,0px); background:url('http://ekladata.com/-Hy7ogawoE0tG4T0woVbp-1aDiI.jpg'); background-position:50% 50%; transition:all 1.5s linear;}
    #bt1:hover ~ #p1{transform:translate(0px,0px); width:800px;}
    #bt1:hover ~ #p2{transform:translate(800px,0px);}
    #bt1:hover ~ #p3{transform:translate(1000px,0px);}
    #bt1:hover ~ #p4{transform:translate(1200px,0px);}
    #bt2:hover ~ #p2{transform:translate(0px,0px); width:800px;}
    #bt2:hover ~ #p1{transform:translate(-200px,0px);}
    #bt2:hover ~ #p3{transform:translate(800px,0px);}
    #bt2:hover ~ #p4{transform:translate(1000px,0px);}
    #bt3:hover ~ #p3{transform:translate(0px,0px); width:800px;}
    #bt3:hover ~ #p1{transform:translate(-400px,0px);}
    #bt3:hover ~ #p2{transform:translate(-200px,0px);}
    #bt3:hover ~ #p4{transform:translate(800px,0px);}
    #bt4:hover ~ #p4{transform:translate(0px,0px); width:800px;}
    #bt4:hover ~ #p1{transform:translate(-600px,0px);}
    #bt4:hover ~ #p2{transform:translate(-400px,0px);}
    #bt4:hover ~ #p3{transform:translate(-200px,0px);}
    --></style>