• Montage 99

    Ce montage à l'attention de Melofaroh mais qui peut peut-être servir à d'autres.

    7 images horizontales au ratio 16/9; le nombre d'images est à votre convenance.

    Survol

     

     

     

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; background: url('http://ekladata.com/NHEeZDb1WqJyRSMASZM_O-yq4rA.jpg'); background-size: 60vw 33.75vw;">
    <p id="cc">Survol</p>
    <p id="bts1" class="bts">&nbsp;</p>
    <p id="bts2" class="bts">&nbsp;</p>
    <p id="bts3" class="bts">&nbsp;</p>
    <p id="bts4" class="bts">&nbsp;</p>
    <p id="bts5" class="bts">&nbsp;</p>
    <p id="bts6" class="bts">&nbsp;</p>
    <p id="mg1" class="mg">&nbsp;</p>
    <p id="mg2" class="mg">&nbsp;</p>
    <p id="mg3" class="mg">&nbsp;</p>
    <p id="mg4" class="mg">&nbsp;</p>
    <p id="mg5" class="mg">&nbsp;</p>
    <p id="mg6" class="mg">&nbsp;</p>
    </div>

    <style><!--
    #cc{position:absolute; z-index:1; width:6vw; border:0.1vh solid white; font-size:1.5vw; text-shadow:0.1vh 0.1vh black; color:white; text-align:center; transform:translate(27vw,1vw);}
    .bts{position:absolute; z-index:5; width:2vw; height:2vw; border-radius:50%; background:lime; box-shadow:inset -0.3vh -0.3vh 0.4vh white, inset 0.3vh 0.3vh 0.5vh black;}
    #bts1{transform:translate(57vw,2vw);}
    #bts2{transform:translate(57vw,5vw);}
    #bts3{transform:translate(57vw,8vw);}
    #bts4{transform:translate(57vw,11vw);}
    #bts5{transform:translate(57vw,14vw);}
    #bts6{transform:translate(57vw,17vw);}
    #bts1:hover ~ .mg{position:absolute; z-index:1; background:url('http://ekladata.com/Ufe3fVF_mZFgUCeS4hrQ4krt8PQ.jpg'); background-size:60vw 33.75vw;}
    #bts2:hover ~ .mg{position:absolute; z-index:1; background:url('http://ekladata.com/9v_hsiHV6CeYhLBzSvlL6dJ1CjU.jpg'); background-size:60vw 33.75vw;}
    #bts3:hover ~ .mg{position:absolute; z-index:1; background:url('http://ekladata.com/YGpt_5fBEqRMaUn_tslYqQZ_HUA.jpg'); background-size:60vw 33.75vw;}
    #bts4:hover ~ .mg{position:absolute; z-index:1; background:url('http://ekladata.com/__dgpz53q8m9MAtqaHOvC8b7CdE.jpg'); background-size:60vw 33.75vw;}
    #bts5:hover ~ .mg{position:absolute; z-index:1; background:url('http://ekladata.com/vnHjjjIWzIgTwZWzRiXBq0k1VYM.jpg'); background-size:60vw 33.75vw;}
    #bts6:hover ~ .mg{position:absolute; z-index:1; background:url('http://ekladata.com/m7QzZTJSXO2YRHul0b4_gZBHETU.jpg'); background-size:60vw 33.75vw;}
    #mg1{width:10vw; height:33.75vw; transform:translate(0vw,0vw) rotatey(90deg); background-position:0vw 0vw; transition:1s linear 0s;}
    #mg2{width:10vw; height:33.75vw; transform:translate(10vw,0vw) rotatey(90deg); background-position:-10vw 0vw; transition:1s linear 0.1s;}
    #mg3{width:10vw; height:33.75vw; transform:translate(20vw,0vw) rotatey(90deg); background-position:-20vw 0vw; transition:1s linear 0.2s;}
    #mg4{width:10vw; height:33.75vw; transform:translate(30vw,0vw) rotatey(90deg); background-position:-30vw 0vw; transition:1s linear 0.3s;}
    #mg5{width:10vw; height:33.75vw; transform:translate(40vw,0vw) rotatey(90deg); background-position:-40vw 0vw; transition:1s linear 0.4s;}
    #mg6{width:10vw; height:33.75vw; transform:translate(50vw,0vw) rotatey(90deg); background-position:-50vw 0vw; transition:1s linear 0.5s;}

    #bts1:hover ~ #mg1,#bts2:hover ~ #mg1,#bts3:hover ~ #mg1,#bts4:hover ~ #mg1,#bts5:hover ~ #mg1,#bts6:hover ~ #mg1{transform:translate(0vw,0vw) rotatey(0deg); background-position:0vw 0vw;}
    #bts1:hover ~ #mg2,#bts2:hover ~ #mg2,#bts3:hover ~ #mg2,#bts4:hover ~ #mg2,#bts5:hover ~ #mg2,#bts6:hover ~ #mg2{transform:translate(10vw,0vw) rotatey(0deg); background-position:-10vw 0vw;}
    #bts1:hover ~ #mg3,#bts2:hover ~ #mg3,#bts3:hover ~ #mg3,#bts4:hover ~ #mg3,#bts5:hover ~ #mg3,#bts6:hover ~ #mg3{transform:translate(20vw,0vw) rotatey(0deg); background-position:-20vw 0vw;}
    #bts1:hover ~ #mg4,#bts2:hover ~ #mg4,#bts3:hover ~ #mg4,#bts4:hover ~ #mg4,#bts5:hover ~ #mg4,#bts6:hover ~ #mg4{transform:translate(30vw,0vw) rotatey(0deg); background-position:-30vw 0vw;}
    #bts1:hover ~ #mg5,#bts2:hover ~ #mg5,#bts3:hover ~ #mg5,#bts4:hover ~ #mg5,#bts5:hover ~ #mg5,#bts6:hover ~ #mg5{transform:translate(40vw,0vw) rotatey(0deg); background-position:-40vw 0vw;}
    #bts1:hover ~ #mg6,#bts2:hover ~ #mg6,#bts3:hover ~ #mg6,#bts4:hover ~ #mg6,#bts5:hover ~ #mg6,#bts6:hover ~ #mg6{transform:translate(50vw,0vw) rotatey(0deg); background-position:-50vw 0vw;}
    --></style>

    Les boutons en class="bts"

    Les 6 images qui constituent l'ensemble de l'image (adresse en bleu) en class="mg".

    Les 6 images sont dimensionnées et positionnées (rotation de 90 degrés) avec chacune une partie définie de l'image.

    Le survol de chaque bouton fait tourner chaque portion d'image de -90 degrés.