• 30a.01.2024

    Montage en 800x600px pour 2 images 800x600px, à survoler.

     

     

     

     

     

     


    <div style="width: 800px; height: 600px; margin: 30px auto; text-align: left; ">
    <p id="cd1">&nbsp;</p>
    <p id="cd2">&nbsp;</p>
    <p id="btd" class="bt">&nbsp;</p>
    <p id="btg" class="bt">&nbsp;</p>
    <p id="mtd" class="mt">&nbsp;</p>
    <p id="mtg" class="mt">&nbsp;</p>
    </div>
    <style><!--
    #cd1{position:absolute; z-index:10; width:390px; height:600px; transform:translate(0px,0px);}
    #cd2{position:absolute; z-index:10; width:390px; height:600px; transform:translate(410px,0px);}
    .bt{position:absolute; z-index:1; background:url('http://ekladata.com/EdgzEiOO3XcszXBDnMrHvEx79Is.jpg'); background-size:800px 600px; transition:all 1s;}
    #btd{width:390px; height:600px; background-position:0px 0px; transform:translate(0px,0px);}
    #btg{width:410px; height:600px; transform-origin:center left; background-position:-390px 0px; transform:translate(390px,0px) perspective(2000px) rotatey(-90deg);}
    .mt{position:absolute; z-index:1; background:url('http://ekladata.com/g8ejSgoFMiALqZHMeGFFm0NcxUI.jpg'); background-size:800px 600px; transition:all 1s;}
    #mtd{width:390px; height:600px; background-position:-410px 0px; transform:translate(410px,0px);}
    #mtg{width:410px; height:600px; transform-origin:center right; background-position:0px 0px; transform:translate(0px,0px) perspective(2000px) rotatey(90deg);}
    #cd1:hover ~ #btg{z-index:5;transform:translate(390px,0px) perspective(2000px) rotatey(0deg);}
    #cd2:hover ~ #mtg{z-index:5;transform:translate(0px,0px) perspective(2000px) rotatey(0deg);}
    --></style>