• Mont.24.3.23

     7 images au ratio 16/9, en 1000x563px.

    Je n'ai pas réussi à faire une animation identique pour les 6 vignettes ... sniff !

    SURVOL

     

     

     

     

     

     

    <div style="width: 1000px; height: 563px; border: 4px ridge grey; box-shadow: 4px 4px 8px black; margin: 30px auto; text-align: left; background: url('http://ekladata.com/i2yw1gkfW2LDZ3iGtkCq56LEZ58.jpg'); background-size: cover;">
    <p id="jd0">SURVOL</p>
    <p id="jd1" class="jd">&nbsp;</p>
    <p id="jd2" class="jd">&nbsp;</p>
    <p id="jd3" class="jd">&nbsp;</p>
    <p id="jd4" class="jdb">&nbsp;</p>
    <p id="jd5" class="jdb">&nbsp;</p>
    <p id="jd6" class="jdb">&nbsp;</p>
    </div>

    <style><!--
    #jd0{position:absolute; z-index:1; width:30px; height:230px; text-align:center; font-size:25px; color:white; text-shadow:1px 1px black; background:rgba(0,0,0,0.5); transform:translate(0px,50px);}
    .jd{position:absolute; z-index:1; width:300px; height:50px; border:4px solid white; transition:height 1s 0s, width 1s 1s, transform 1s 1s, background 1s 1s;}
    .jdb{position:absolute; z-index:1; width:300px; height:50px; border:4px solid white; transition:height 1s 0s, width 1s 1s, transform 1s 1s, background 1s 1s, margin 1s 0s;}
    #jd1{box-sizing:border-box; background:url('http://ekladata.com/TlAeXddAO2DxrrMM5ydPchS_8p4.jpg'); background-size:1000px 563px;  background-position:0px 0px; transform:translate(0px,0px);}
    #jd2{box-sizing:border-box; background:url('http://ekladata.com/z7_u-5T9jVILTPc2WBD40AIxvP4.jpg'); background-size:1000px 563px;  background-position:-350px 0px; transform:translate(350px,0px);}
    #jd3{box-sizing:border-box; background:url('http://ekladata.com/N1wdtKHHPWTF0fYadOUC2qukx6o.jpg'); background-size:1000px 563px;  background-position:-700px 0px; transform:translate(700px,0px);}
    #jd4{box-sizing:border-box; transform-origin: bottom center; background:url('http://ekladata.com/kAREfU2Ha1QbpqzPkn0gF2LSiSY.jpg'); background-size:1000px 563px;  background-position:0px 0px; transform:translate(0px,0px); margin-top:513px;}
    #jd5{box-sizing:border-box; transform-origin:100% 0%; background:url('http://ekladata.com/4lSUuf1h5xOYJsakECfx7nk9ciQ.jpg'); background-size:1000px 563px;  background-position:-350px 0px; transform:translate(350px,0px); margin-top:513px;}
    #jd6{box-sizing:border-box; transform-origin:bottom center; background:url('http://ekladata.com/vG1EtLTyTdfl9f5-ZNq-iPzZXM0.jpg'); background-size:1000px 563px;  background-position:-700px 0px; transform:translate(700px,0px); margin-top:513px;}
    #jd1:hover,#jd2:hover,#jd3:hover{z-index:5; width:1000px; height:563px; background-position:0px 0px; transform:translate(0px,0px);}
    #jd4:hover, #jd5:hover,#jd6:hover{z-index:5; width:1000px; height:563px; background-position:0px 0px; transform:translate(0px,0px); margin-top:0px;}
    --></style>