• Au clic

    Reprise du montage publié  mais en 60vw par 33.75vw (ratio 16/9).

    6 adresses d'images en bleu, à votre dimension mais au ratio 16/9.

    Clic sur un bouton avec retour par clic sur le montage pour voir l'animation; le clic d'un bouton sur l'autre affiche les images sans animation.

    Clic sur chaque bouton. Retour par clic sur montage.

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.6vh ridge white; margin: 2vh auto; background: linear-gradient(to bottom, #f3e2c7 0%,#c19e67 35%,#bf8b3f 51%,#b68d4c 65%,#e9d4b3 100%);">
    <p id="by0">Clic sur chaque bouton. Retour par clic sur montage.</p>
    <input id="by1" class="by" type="text" /> <input id="by2" class="by" type="text" /> <input id="by3" class="by" type="text" /> <input id="by4" class="by" type="text" /> <input id="by5" class="by" type="text" /> <input id="by6" class="by" type="text" />
    <p id="ayg1" class="ay">&nbsp;</p>
    <p id="ayg2" class="ay">&nbsp;</p>
    <p id="ayg3" class="ay">&nbsp;</p>
    <p id="ayg4" class="ay">&nbsp;</p>
    <p id="ayg5" class="ay">&nbsp;</p>
    <p id="ayg6" class="ay">&nbsp;</p>
    </div>
    <style><!--
    #by0{position:absolute; z-index:1; width:60vw; text-align:center; font-size:2vw; color:white; text-shadow:0.2vh 0.2vh black; transform:translate(0vw,30vw);}
    .by{position:absolute; z-index:10; width:2vw; height:2vw; border-radius:50%;background:lime; border:0.2vh solid grey; box-shadow:inset 0.3vh 0.3vh 0.5vh black, inset -0.3vh -0.3vh 0.5vh white;}
    #by1{transform:translate(57vw,2vw);}
    #by2{transform:translate(57vw,5vw);}
    #by3{transform:translate(57vw,8vw);}
    #by4{transform:translate(57vw,11vw);}
    #by5{transform:translate(57vw,14vw);}
    #by6{transform:translate(57vw,17vw);}

    .ay{position:absolute; z-index:5; box-sizing:border-box; width:7vw; height:7vw; border-radius:50%;border:0.2vh solid white; background:url('http://ekladata.com/-38yEX8R4Ae6vt9J18E4yrxZPdk/gerot.jpg'); background-size:60vw 33.75vw;}
    #ayg1{transform:translate(2vw,2vw); background-position:0vw 0vw;}
    #ayg2{transform:translate(40vw,2vw); background-position:-40vw 0vw;}
    #ayg3{transform:translate(12vw,11vw); background-position:0vw -11vw;}
    #ayg4{transform:translate(30vw,11vw); background-position:-30vw -11vw;}
    #ayg5{transform:translate(2vw,22vw); background-position:0vw -22vw;}
    #ayg6{transform:translate(40vw,22vw); background-position:-30vw -22vw;}

    #by1:hover~.ay,#by1:focus~.ay{background:url('http://ekladata.com/xP3pVduu59ZRT94ZS4MbPA5I-40.jpg'); background-size:60vw 33.75vw;}
    #by2:hover~.ay,#by2:focus~.ay{background:url('http://ekladata.com/rMsYxpoIltKjlYS-rPDXMektAiw.jpg'); background-size:60vw 33.75vw;}
    #by3:hover~.ay, #by3:focus~.ay{background:url('http://ekladata.com/RSimF7SQtUqPQHT2E2a1P3Nnik0.jpg'); background-size:60vw 33.75vw;}
    #by4:hover~.ay,#by4:focus~.ay{background:url('http://ekladata.com/srK3a2CqDP1dXOG_VZD3oo7BKBQ.jpg'); background-size:60vw 33.75vw;}
    #by5:hover~.ay,#by5:focus~.ay{background:url('http://ekladata.com/uu-qdilQwiqUtpS1gMHVCDomBTE.jpg'); background-size:60vw 33.75vw;}
    #by6:hover~.ay,#by6:focus~.ay{background:url('http://ekladata.com/1eXNxB6A954Haa4oN70PfULBqP0.jpg'); background-size:60vw 33.75vw;}

    #by1:focus~#ayg1,#by2:focus~#ayg1,#by3:focus~#ayg1,#by4:focus~#ayg1,#by5:focus~#ayg1,#by6:focus~#ayg1{width:40vw; height:11vw; background-position:0vw 0vw; border:none; border-radius:0%;transform:translate(0vw,0vw); transition:all 1s linear 0s;}
    #by1:focus~#ayg2,#by2:focus~#ayg2,#by3:focus~#ayg2,#by4:focus~#ayg2,#by5:focus~#ayg2,#by6:focus~#ayg2{width:20vw; height:22vw; background-position:-40vw 0vw; border:none; border-radius:0%;transform:translate(40vw,0vw); transition:all 1s linear 0.1s;}
    #by1:focus~#ayg3,#by2:focus~#ayg3,#by3:focus~#ayg3,#by4:focus~#ayg3,#by5:focus~#ayg3,#by6:focus~#ayg3{width:30vw; height:11vw; background-position:0vw -11vw; border:none; border-radius:0%;transform:translate(0vw,11vw); transition:all 1s linear 0.2s;}
    #by1:focus~#ayg4,#by2:focus~#ayg4,#by3:focus~#ayg4,#by4:focus~#ayg4,#by5:focus~#ayg4,#by6:focus~#ayg4{width:10vw; height:11vw; background-position:-30vw -11vw; border:none; border-radius:0%;transform:translate(30vw,11vw); transition:all 1s linear 0.3s;}
    #by1:focus~#ayg5,#by2:focus~#ayg5,#by3:focus~#ayg5,#by4:focus~#ayg5,#by5:focus~#ayg5,#by6:focus~#ayg5{width:30vw; height:11.75vw; background-position:0vw -22vw; border:none; border-radius:0%;transform:translate(0vw,22vw); transition:all 1s linear 0.4s;}
    #by1:focus~#ayg6,#by2:focus~#ayg6,#by3:focus~#ayg6,#by4:focus~#ayg6,#by5:focus~#ayg6,#by6:focus~#ayg6{width:30vw; height:11.75vw; background-position:-30vw -22vw; border:none; border-radius:0%;transform:translate(30vw,22vw); transition:all 1s linear 0.5s;}
    --></style>