• 07b/10/2023

    Une variante du code précédent.

     

     

     

     

     


    <div style="width: 1100px; height: 619px; margin: 30px auto; text-align: left;">
    <p id="sk1" class="sk">&nbsp;</p>
    <p id="sk2" class="sk">&nbsp;</p>
    <p id="sk3" class="sk">&nbsp;</p>
    <p id="sk4" class="sk">&nbsp;</p>
    <p id="sk5" class="sk">&nbsp;</p>
    </div>
    <style><!--
    .sk{position:absolute; z-index:1; width:1100px; height:619px; box-shadow:4px 4px 8px black; filter:sepia(1); transition:all 1s, filter 1s 1s;}
    #sk1{box-sizing:border-box; background:url('http://ekladata.com/Niq50_knsW0CWvduzof9O9p1_9I.jpg'); background-size:1100px 619px; background-position: 0px -80px; width:200px; height:500px; border:4px ridge white; transform-origin:top left; transform:translate(0px,80px) skewy(-15deg);}
    #sk2{box-sizing:border-box; background:url('http://ekladata.com/pZV4IEvxM7kjBA6Ces9e8EfOmJM.jpg'); background-size:1100px 619px; background-position: -210px -25px; width:200px; height:500px; border:4px ridge white; transform-origin:top left; transform:translate(210px,25px) skewy(15deg);}
    #sk3{box-sizing:border-box; background:url('http://ekladata.com/8qO1M87aq9C_x5VnVtlqKSQOHcE.jpg'); background-size:1100px 619px; background-position: -420px -80px; width:200px; height:500px; border:4px ridge white; transform-origin:top left; transform:translate(420px,80px) skewy(-15deg);}
    #sk4{box-sizing:border-box; background:url('http://ekladata.com/_4aVdRZSZpMT2m9DTHsxpr-7O4I.jpg'); background-size:1100px 619px; background-position: -630px -25px; width:200px; height:500px; border:4px ridge white; transform-origin:top left; transform:translate(630px,25px) skewy(15deg);}
    #sk5{box-sizing:border-box; background:url('http://ekladata.com/7K3xtsALn0u3nhJqWtdTU_4Fdjg.jpg'); background-size:1100px 619px; background-position: -840px -80px; width:200px; height:500px; border:4px ridge white; transform-origin:top left; transform:translate(840px,80px) skewy(-15deg);}
    #sk1:hover,#sk2:hover,#sk3:hover,#sk4:hover,#sk5:hover{z-index:5; width:1100px; height:619px;transform:translate(0px,0px) skewy(0deg); background-position:0px 0px; filter:sepia(0);}
    --></style>