• Montage 16

    Clic maintenu.

    L'animation de l'image en fond est différente des autres car cette image est déjà  à la taille du cadre: elle ne fait que passer en premier plan.

     

     

     

     

     

     


    <p style="text-align: center;">Clic maintenu.</p>
    <div style="width: 60vw; height: 33.75vw; border: 0.4vh solid white; margin: 1vh auto;">
    <p id="pp1">&nbsp;</p>
    <p id="pp2">&nbsp;</p>
    <p id="pp3">&nbsp;</p>
    <p id="pp4">&nbsp;</p>
    <p id="pp5">&nbsp;</p>
    <p id="pp6">&nbsp;</p>
    </div>
    <style><!--
    #pp1{position:absolute; z-index:1; width:60vw; height:33.75vw; border:0.4vh solid white; transition:all 1s linear;transform:translate(0vw,0vw); box-sizing:border-box;background:url('http://ekladata.com/HBgtoGVamN-utxHYebQl5gauqOw.jpg'); background-size:cover;}
    #pp2{position:absolute; z-index:1; width:50vw; height:28vw; border:0.4vh solid white; transition:all 1s linear;transform:translate(5vw,2.75vw); box-sizing:border-box; background:url('http://ekladata.com/0fRy2hAycX3gc0I3Aeoi_MqHV08.jpg'); background-size:cover;}
    #pp3{position:absolute; z-index:1; width:40vw; height:22.5vw; border:0.4vh solid white; transition:all 1s linear;transform:translate(10vw,5.5vw); box-sizing:border-box; background:url('http://ekladata.com/JqVs42QWLQnsQU0oVM0KkyFq9Z0.jpg'); background-size:cover;}
    #pp4{position:absolute; z-index:1; width:30vw; height:17vw; border:0.4vh solid white; transition:all 1s linear;transform:translate(15vw,8vw); box-sizing:border-box; background:url('http://ekladata.com/MTwGV3WjAA_pmKLFZ3zyzQjKidc.jpg'); background-size:cover;}
    #pp5{position:absolute; z-index:1; width:20vw; height:11.25vw; border:0.4vh solid white; transition:all 1s linear;transform:translate(20vw,11.25vw); box-sizing:border-box; background:url('http://ekladata.com/aQRirbKgJN-ODx6JEAFrUurV6JY.jpg'); background-size:cover;}
    #pp6{position:absolute; z-index:1; width:10vw; height:6vw; border:0.4vh solid white; transition:all 1s linear;transform:translate(25vw,13.75vw); box-sizing:border-box; background:url('http://ekladata.com/0TTpHe_L4zpghri3cY0-htPYv7I.jpg'); background-size:cover;}

    #pp1:active,#pp2:active,#pp3:active,#pp4:active,#pp5:active,#pp6:active{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
    --></style>