• 08.01.2024C

    Montage en 800x600px. Variante avec 4 images horizontales et 2 verticales.

    SURVOL

     

     

     

     

     

     


    <div style="width: 800px; height: 600px;  text-align: left; margin: 30px auto;">
    <p id="sc0">SURVOL</p>
    <p id="sc1" class="sc">&nbsp;</p>
    <p id="sc2" class="sc">&nbsp;</p>
    <p id="sc3" class="sc">&nbsp;</p>
    <p id="sc4" class="sc">&nbsp;</p>
    <p id="sc5" class="sc">&nbsp;</p>
    <p id="sc6" class="sc">&nbsp;</p>
    </div>


    <style><!--
    #sc0{position:absolute; z-index:1; width:150px; height:300px; font-size:30px; transform:translate(0px,50px);}
    .sc{position:absolute; z-index:1;border:3px solid white; filter:grayscale(1); transition:width 1s, height 1s, transform 1s, background 1s;}
    #sc1{box-sizing:border-box; width:130px; height:500px; background:url('http://ekladata.com/FY7H08UU5ZcAVA-hAsc97K4Clyk.jpg'); background-position:0px -50px; transform:translate(0px,50px) skewy(25deg);}
    #sc2{box-sizing:border-box; width:130px; height:500px; background:url('http://ekladata.com/gthbgYXbbMv8LeyT0gOtWsgBRn4.jpg'); background-position:-130px -50px; transform:translate(130px,50px) skewy(-25deg);}
    #sc3{box-sizing:border-box; width:130px; height:500px; background:url('http://ekladata.com/BA_DU618vN7Y8piU5gsdl22LNSg.jpg'); background-position:-260px -50px; transform:translate(260px,50px) skewy(25deg);}
    #sc4{box-sizing:border-box; width:130px; height:500px; background:url('http://ekladata.com/B3Im5L8NSmoYKGKU9iuwXYZOdGA.jpg'); background-position:-390px -50px; transform:translate(390px,50px) skewy(-25deg);}
    #sc5{box-sizing:border-box; width:130px; height:500px; background:url('http://ekladata.com/n_slI4yqNi1rFm38_ZzQrZ28Oys.jpg'); background-position:-520px -50px; transform:translate(520px,50px) skewy(25deg);}
    #sc6{box-sizing:border-box; width:130px; height:500px; background:url('http://ekladata.com/cterMSuI8dTtchXFgWT9G33t4T0.jpg'); background-position:-650px -50px; transform:translate(650px,50px) skewy(-25deg);}
    #sc1:hover,#sc2:hover,#sc5:hover,#sc6:hover{z-index:5; width:800px; height:600px; background-position:0px 0px; transform:translate(0px,0px); filter:grayscale(0);}
    #sc3:hover{z-index:5; width:337px; height:600px; background-position:0px 0px; transform:translate(100px,0px); filter:grayscale(0);}
    #sc4:hover{z-index:5; width:337px; height:600px; background-position:0px 0px; transform:translate(363px,0px); filter:grayscale(0);}
    --></style>