• Construction 9

    En prenant comme base, le code précédent, nous pouvons le modifier pour:

    _ qu'il présente plus d'images,

    _ que ces images s'agrandissent à partir de leur centre et non à partir de leur angle haut/gauche (par défaut),

    _ que le montage n'ait pas de couleur de fond mais soit transparent sur votre page,

    _ que le montage n'ait pas de bordure; dans mon exemple, j'ai laissé la bordure en pointillé, pour visualiser les dimensions mais supprimez border:0.2vh dashed black;

     

     

     

     

     

     

     

     

    Survolez chaque partie visible des éléments.

    <div style="width: 60vw; height: 69vh; margin: 2vh auto; border: 0.2vh dashed black;">
    <p id="ph1">&nbsp;</p>
    <p id="ph2">&nbsp;</p>
    <p id="ph3">&nbsp;</p>
    <p id="ph4">&nbsp;</p>
    <p id="ph5">&nbsp;</p>
    <p id="ph6">&nbsp;</p>
    <p id="ph7">&nbsp;</p>
    <p id="ph8">&nbsp;</p>
    <p id="ph9">Survolez chaque partie visible des &eacute;l&eacute;ments.</p>
    </div>
    <style><!--
    #ph1{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('http://ekladata.com/XEt1xXqcZXURnRrKJlnnZGlw0lE.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(17vw,10vh) rotate(45deg); transition:all 1s linear;}
    #ph2{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('http://ekladata.com/jUPQEasRua88Ptw1hQKFjm1OUhc.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(9.8vw,24.8vh) rotate(45deg);transition:all 1s linear;}
    #ph3{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('http://ekladata.com/NKrzKcA0HZqkQjcGGu8ErA1ByLk.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(24.2vw,24.8vh) rotate(45deg); transition:all 1s linear;}
    #ph4{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('http://ekladata.com/0Br_HTn6nNSXU984fLaIEn4A0rg.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(17vw,39.5vh) rotate(45deg); transition:all 1s linear;}
    #ph5{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('http://ekladata.com/Ox33jMYLde3-HLsJsZXrk7tEGoo.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(31.4vw,10vh) rotate(45deg); transition:all 1s linear;}
    #ph6{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('http://ekladata.com/8gsWco12YbX3Eii1LipdfufY9SI.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(31.4vw,39.5vh) rotate(45deg); transition:all 1s linear;}
    #ph7{position:absolute; z-index:1; width:10vw; height:10vw; border:0.3vh solid black; background:url('http://ekladata.com/dWRvdM8rqpB0G3NEUJmTUYcn9bo.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(38.6vw,24.8vh) rotate(45deg); transition:all 1s linear;}
    #ph8{position:absolute; z-index:1; width:28.5vw; height:14vw; border:0.3vh solid black; background:url('http://ekladata.com/AakzuVqWt3aalhpJnmvmTLwM4eQ.jpg'); background-size:60vw 69vh; background-position:50% 50%; transform:translate(15vw,20.7vh); transition:all 1s linear;}
    #ph9{position:absolute; z-index:1; width:40vw; transform:translate(10vw,0vh);text-align:center; font-size:3vh; color:white; text-shadow:0.2vh 0.2vh black; transition:all 1s linear;}
    #ph1:hover, #ph2:hover,#ph3:hover,#ph4:hover,#ph5:hover,#ph6:hover,#ph7:hover,#ph8:hover{z-index:10; width:60vw; height:69vh; border:0.6vh ridge black; transform:translate(0vw,0vh);}
    --></style>

    Remplaçez mes adresses-images, au rapport 16/9, en rouge dans le code, par les vôtres, qu'elles que soient leurs dimensions.