• Montage 26

     

    Pour terminer la série pour montrer que l'on peut personnaliser à son goût un montage.

     

     

     

     

     

     

     

     

     

    Clic maintenu sur fond et vignettes.

    <div style="width: 60vw; height: 33.75vw; border: 0.4vh solid white; margin: 1vh auto;">
    <p id="pp1">&nbsp;</p>
    <p id="pp2" class="ppa">&nbsp;</p>
    <p id="pp3" class="ppa">&nbsp;</p>
    <p id="pp4" class="ppa">&nbsp;</p>
    <p id="pp5" class="ppa">&nbsp;</p>
    <p id="pp6" class="ppa">&nbsp;</p>
    <p id="pp7" class="ppa">&nbsp;</p>
    <p id="pp8" class="ppa">&nbsp;</p>
    <p id="pp9" class="ppa">&nbsp;</p>
    <p id="ex">Clic maintenu sur fond et vignettes.</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/Es3QNZUMMugOa_-60gsg5jNsIcY@1152x648.jpg'); background-size:cover;}
    .ppa{position:absolute; z-index:5; width:9vw; height:9vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s,filter 1s linear 1s;}
    #pp2{transform:translate(6vw,5vw) rotate(45deg); box-sizing:border-box; background:url('http://ekladata.com/92wW6EHWMX8llXxaZMZPHjYoT70@1152x648.jpg'); background-size:cover; -webkit-filter:grayscale(1); filter:grayscale(1);}
    #pp3{transform:translate(19vw,5vw) rotate(45deg); box-sizing:border-box; background:url('http://ekladata.com/xD6LNXedkinWy3sWUP_ZS0sWoZA@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp4{transform:translate(32vw,5vw) rotate(45deg); box-sizing:border-box; background:url('http://ekladata.com/JPF9BY6GinEmA2bp8ykcp8zXp9s@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp5{transform:translate(45vw,5vw) rotate(45deg); box-sizing:border-box; background:url('http://ekladata.com/oTihw8zm3E_Jk-mcDlxpAttaigA@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp6{transform:translate(6vw,18vw) rotate(45deg); box-sizing:border-box; background:url('http://ekladata.com/PdzEh3qaTNtOfH6IhecA1YLtHh0@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp7{transform:translate(19vw,18vw) rotate(45deg); box-sizing:border-box; background:url('http://ekladata.com/PFgoBvS8poXJS6NIiJVjkV11NTo@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp8{transform:translate(32vw,18vw) rotate(45deg); box-sizing:border-box; background:url('http://ekladata.com/wzLmu5JfgC9kV7QZqfonOWhiFb8@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}
    #pp9{transform:translate(45vw,18vw) rotate(45deg); box-sizing:border-box; background:url('http://ekladata.com/dMbDR_2FU9mWgeWjnJi9JRGIA0Y@1152x648.jpg'); background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1);}

    #ex{position:absolute; z-index:1; width:25vw; transform:translate(35vw,1vw); text-align:center; font-size:1vw; color:white; text-shadow:0.1vh 0.1vh black;}
    #pp1:active,#pp2:active,#pp3:active,#pp4:active,#pp5:active,#pp6:active,#pp7:active,#pp8:active,#pp9:active{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotate(0deg);-webkit-filter:grayscale(0);filter:grayscale(0); box-shadow:none;}
    --></style>

    Quelles que soient les dimensions de vos images, elles sont redimensionnées dans le code en 1152x648px.

    Remplacez la partie en bleu de mes adresses par l'équivalent  des vôtres.