• Slide 2

    Variante avec une autre animation (parmi tant d'autres possibles !)


    Au lieu de positionner les images à l'extérieur du cadre, on peut les placer au centre, en rond et avec des dimensions nulles et les faire s'agrandir au clic sur les boutons.

    J'ai ajouté une bordure blanche sur chaque image en plaçant cette bordure à l'intérieur des dimensions des images par box-sizing:border-box;



    <div style="position: relative; width: 800px; height: 500px; border: 4px ridge grey; margin: 30px auto; text-align: left; overflow: hidden; background: grey;"><input id="bn1" class="bn" type="text" /> <input id="bn2" class="bn" type="text" /> <input id="bn3" class="bn" type="text" /> <input id="bn4" class="bn" type="text" /> <input id="bn5" class="bn" type="text" /> <input id="bn6" class="bn" type="text" /> <img id="wa0" src="http://ekladata.com/HGTGGETCC-V_u6nzdKJVeS02Ufc.jpg" alt="" /> <img id="wa1" class="wa" src="http://ekladata.com/zqLqTU3oSIfnvSZNCFb9BrVxZaw.jpg" alt="" /> <img id="wa2" class="wa" src="http://ekladata.com/SgJpG_s6QolzlmZxSMRclVCyMnE.jpg" alt="" /> <img id="wa3" class="wa" src="http://ekladata.com/cx91OfA6Juc5nOdCCKxA2EJak50.jpg" alt="" /> <img id="wa4" class="wa" src="http://ekladata.com/oIvfROK0GyMNWfkiDCWD-UZXiMs.jpg" alt="" /> <img id="wa5" class="wa" src="http://ekladata.com/Ktom6jY08eLucIeRwygD2J689tQ.jpg" alt="" /> <img id="wa6" class="wa" src="http://ekladata.com/uQO4D59uTJPkRXvcu82VrYV_LCI.jpg" alt="" /></div>
    <style><!--
    .bn{position:absolute; z-index:1; width:25px; height:25px; border-radius:50%; background:white; border:1px solid black; box-shadow:inset 3px 3px 4px black;}
    #bn1{transform:translate(150px,465px);}
    #bn2{transform:translate(220px,465px);}
    #bn3{transform:translate(290px,465px);}
    #bn4{transform:translate(360px,465px);}
    #bn5{transform:translate(430px,465px);}
    #bn6{transform:translate(500px,465px);}
    .bn:focus{background:red;}
    .wa{position:absolute; z-index:1; width:0px; height:0px; transform:translate(400px,225px); border-radius:50%; transition:all 1s, border-radius 1s 1s;}
    #wa0{position:absolute; z-index:1; box-sizing:border-box; border:4px solid white; width:800px; height:450px; transform:translate(0px,0px);}
    #bn1:focus ~ #wa1,#bn2:focus ~ #wa2,#bn3:focus ~ #wa3,#bn4:focus ~ #wa4,#bn5:focus ~ #wa5,#bn6:focus ~ #wa6{z-index:5; box-sizing:border-box; width:800px; height:450px; border:4px solid white; border-radius:0%; transform:translate(0px,0px);}
    --></style>