• Eclatement

    Page nommée "Eclatement" mais j'aurais pu orthographier: Eklatement" !

    Je viens de publier un article, au 22/2/2016, sur ce modèle.

    Le principe est de placer des images, les unes sur les autres, réduites en dimension et, par dessus ces images, en premier plan, un cadre/bouton qui, au clic, va les animer toutes, selon le paramétrage en CSS.

    Une fois agrandie, au clic, les images rempliront le montage et le retour à zéro se fait pas le survol d'un bouton ou en cliquant hors montage.

    Il faut revenir à zéro pour accéder à une nouvelle image.

    Les dimensions du montage et des images sont à modifier selon vos choix.
    Pour simplifier l'exercice, je n'ai pris que des images en horizontal mais les verticales sont tout à fait possible, avec une positionnement adapté.

    Affichage des images au clic sur le bouton central; remise à zéro en survolant la flèche rouge ou en sortant du montage; cliquez sur chaque images agrandie pour l'agrandir à la dimension du montage, ici: 1152x648px, avec fond noir, pour une visiteuse d'outre -Rhône !

    <div id="fg"><img id="ret" src="http://ekladata.com/revk-ZXcSx9zlJ6qVpUNxnrYbbk/024.gif" alt="" />
    <p id="exp">votre commentaire</p>
    <p><input id="ex1" type="button" value="Clic ICI" /> <input id="ex1a" type="text" /> <input id="ex1b" type="text" /><input id="ex1c" type="text" /><input id="ex1d" type="text" /></p>
    </div>

    <style type="text/css"><!--
    #fg{position:relative; width:1152px; height:648px; border:4px ridge grey; margin:5px auto; background:black;}
    #ret{position: absolute; z-index:6; transform:translate(1100px,0px) rotate(180deg);}
    #exp{position:absolute; z-index:1; transform:translate(280px,10px);width:600px; height:60px; text-align:center; font-size:14pt; color:white;}
    #ex1{position:absolute; z-index:2; transition:all 1s linear; transform:translate(450px,300px); width: 150px; height: 50px; text-align:center; font-size:25pt; }
    #ex1a {position:absolute; z-index:1; transition:all 1s linear; transform:translate(550px,325px); width:0px; height:0px; background:url(http://ekladata.com/OQKQRGmZYm9wk-fdQpshvkRdXKA/6853.jpg); background-size:cover;}
    #ex1b {position:absolute; z-index:1; transition:all 1s linear; transform:translate(550px,325px); width:0px; height:0px; background:url(http://ekladata.com/M9-rOiEPy3P2xqtALddFtVnL_0Q/6855.jpg); background-size:cover;}
    #ex1c {position:absolute; z-index:1; transition:all 1s linear; transform:translate(550px,325px); width:0px; height:0px; background:url(http://ekladata.com/oH3hGK39O-_kOFFLThg1TKSHMsY/6856.jpg); background-size:cover;}
    #ex1d {position:absolute; z-index:1; transition:all 1s linear; transform:translate(550px,325px); width:0px; height:0px; background:url(http://ekladata.com/PTNuN09c_j6AC6NrZWchiwVDYRk/6860.jpg); background-size:cover;}
    #ex1:focus ~ #ex1a{z-index:3;width:400px; height:300px; transform:translate(0px,0px);}
    #ex1:focus ~ #ex1b{z-index:3;width:400px; height:300px; transform:translate(0px,348px);}
    #ex1:focus ~ #ex1c{z-index:3;width:400px; height:300px; transform:translate(750px,0px);}
    #ex1:focus ~ #ex1d{z-index:3;width:400px; height:300px; transform:translate(750px,348px);}
    #ex1a:hover{ z-index:5; width:1152px; height:648px; transform:translate(0px,0px);}
    #ex1b:hover{ z-index:5; width:1152px; height:648px; transform:translate(0px,0px);}
    #ex1c:hover{ z-index:5; width:1152px; height:648px; transform:translate(0px,0px);}
    #ex1d:hover{ z-index:5; width:1152px; height:648px; transform:translate(0px,0px);}
    --></style>