• 08.01.2024B

    On peut avoir à publier des images horizontales et verticales; voici un exemple avec 4 horizontales et 2 verticales mais on peut ajuster au besoin de chacun.

    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:30px; height:100px; 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:350px; height:200px; background:url('http://ekladata.com/FY7H08UU5ZcAVA-hAsc97K4Clyk.jpg'); background-position:-50px 0px; transform:translate(50px,0px) skewx(25deg);}
    #sc2{box-sizing:border-box; width:350px; height:200px; background:url('http://ekladata.com/gthbgYXbbMv8LeyT0gOtWsgBRn4.jpg'); background-position:-400px 0px; transform:translate(400px,0px) skewx(25deg);}
    #sc3{box-sizing:border-box; width:350px; height:200px; background:url('http://ekladata.com/BA_DU618vN7Y8piU5gsdl22LNSg.jpg'); background-position:-50px -200px; transform:translate(50px,200px) skewx(-25deg);}
    #sc4{box-sizing:border-box; width:350px; height:200px; background:url('http://ekladata.com/B3Im5L8NSmoYKGKU9iuwXYZOdGA.jpg'); background-position:-400px -200px; transform:translate(400px,200px) skewx(-25deg);}
    #sc5{box-sizing:border-box; width:350px; height:200px; background:url('http://ekladata.com/n_slI4yqNi1rFm38_ZzQrZ28Oys.jpg'); background-position:-50px -400px; transform:translate(50px,400px) skewx(25deg);}
    #sc6{box-sizing:border-box; width:350px; height:200px; background:url('http://ekladata.com/cterMSuI8dTtchXFgWT9G33t4T0.jpg'); background-position:-400px -400px; transform:translate(400px,400px) skewx(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(0px,0px); filter:grayscale(0);}
    #sc4:hover{z-index:5; width:337px; height:600px; background-position:0px 0px; transform:translate(463px,0px); filter:grayscale(0);}
    --></style>