• Variante eclatement

     

    Les dimensions de mon exemple précédent étant de 1152x648px, il ne pouvait convenir à tout le monde.
    Revoici le même; en 800x450px (16/9), avec 6 images, horizontales et verticales et une image de fond.
    Clic sur le rond central; clic sur les vignettes; sortie en sortant de l'image.


    <div id="fd">
    <p><input id="ex1" type="button" value="Clic" /> <input id="ex1a" type="text" /> <input id="ex1b" type="text" /><input id="ex1c" type="text" /><input id="ex1d" type="text" /> <input id="ex1e" type="text" /> <input id="ex1f" type="text" /></p>
    </div>

    <style><!--
    #fd{position:relative; width:800px; height:450px; border:4px ridge grey; margin:10px auto; background:url(http://ekladata.com/tQoXB4-Gr-rJYmh67JrbdWy1qrM/b.jpg); background-size:cover;}
    #ex1{position:absolute; z-index:2; transition:all 1s linear; transform:translate(360px,185px); width: 80px; height: 80px; border-radius:50%; text-align:center; font-size:25pt; }
    #ex1a {position:absolute; z-index:1; transition:all 1s linear; transform:translate(400px,225px); width:0px; height:0px; border-radius:50%; background:url(http://ekladata.com/o0UMROECiFFDfjQBVUVroksWChk/6862.jpg); background-size:cover;}
    #ex1b {position:absolute; z-index:1; transition:all 1s linear; transform:translate(400px,225px); width:0px; height:0px;border-radius:50%; background:url(http://ekladata.com/vgXoeHk-GSV7URUsbHXc2Lh1yWs/6863.jpg); background-size:cover;}
    #ex1c {position:absolute; z-index:1; transition:all 1s linear; transform:translate(400px,225px); width:0px; height:0px; border-radius:50%;background:url(http://ekladata.com/DcepteyyfOZK9z-iCwblPXDHCjg/6864.jpg); background-size:cover;}
    #ex1d {position:absolute; z-index:1; transition:all 1s linear; transform:translate(400px,225px); width:0px; height:0px; border-radius:50%;background:url(http://ekladata.com/YDpbvJ1AQgdreEI0IgHwX8ZxWcc/6866.jpg); background-size:cover;}
    #ex1e {position:absolute; z-index:1; transition:all 1s linear; transform:translate(400px,225px); width:0px; height:0px; border-radius:50%;background:url(http://ekladata.com/mRzSXVFOS-QpydKSNFMN0_s5G5k/6849.jpg); background-size:cover;}
    #ex1f {position:absolute; z-index:1; transition:all 1s linear; transform:translate(400px,225px); width:0px; height:0px; border-radius:50%;background:url(http://ekladata.com/SzSp400o3sBDLA_MAjVik4jRAWU/6852.jpg); background-size:cover;}
    #ex1:focus ~ #ex1a{z-index:3;width:150px; height:150px; transform:translate(50px,50px);}
    #ex1:focus ~ #ex1b{z-index:3;width:150px; height:150px; transform:translate(50px,250px);}
    #ex1:focus ~ #ex1c{z-index:3;width:150px; height:150px; transform:translate(600px,50px);}
    #ex1:focus ~ #ex1d{z-index:3;width:150px; height:150px; transform:translate(600px,250px);}
    #ex1:focus ~ #ex1e{z-index:3;width:150px; height:150px; transform:translate(325px,20px);}
    #ex1:focus ~ #ex1f{z-index:3;width:150px; height:150px; transform:translate(325px,280px);}
    #ex1a:hover{ z-index:5; width:800px; height:450px; transform:translate(0px,0px); border-radius:0%;}
    #ex1b:hover{ z-index:5; width:800px; height:450px; transform:translate(0px,0px); border-radius:0%;}
    #ex1c:hover{ z-index:5; width:800px; height:450px; transform:translate(0px,0px); border-radius:0%;}
    #ex1d:hover{ z-index:5; width:800px; height:450px; transform:translate(0px,0px); border-radius:0%;}
    #ex1e:hover{ z-index:5; width:400px; height:450px; transform:translate(200px,0px); border-radius:0%;}
    #ex1f:hover{ z-index:5; width:400px; height:450px; transform:translate(200px,0px); border-radius:0%;}
    --></style>
    ...
    Les images sont placées en fond de cadre "input" (qui accepte le clic); 
    Elles sont positionnées sous un bouton (input:clic) et sont animées au clic sur ce dernier; une fois affichées, elles s'agrandissent au clic.