• Montage on click focus

    Ce montage, comportant 8 images, a un code assez long mais vous pouvez placer moins d'image.
    Chaque image reçoit une animation analogue et seul son positionnement diffère.


    Clic sur chaque vignette.
    Explication du montage dans cette page explicative
    Pour revenir au départ, une fois une vignette agrandie, cliquez hors du montage, où vous le voulez.


    <div style="width: 804px; height: 604px; margin: 10px auto; background: url('http://ekladata.com/E0ucaMsbQLoygkjZbuJqrfqdOw4/yel.jpg'); border: 4px ridge #808080;">
    <p><input id="f1" type="text" /></p>
    <p><input id="f2" type="text" /></p>
    <p><input id="f3" type="text" /></p>
    <p><input id="f4" type="text" /></p>
    <p><input id="f5" type="text" /></p>
    <p><input id="f6" type="text" /></p>
    <p><input id="f7" type="text" /></p>
    <p><input id="f8" type="text" /></p>
    <p id="comm"><br /><span style="background-color: #ffff00;">Clic sur chaque vignette.</span><br />Explication du montage dans cette page explicative<br />Pour revenir au d&eacute;part, une fois une vignette agrandie, <span style="background-color: #ffff00;">cliquez hors du montage</span>, o&ugrave; vous le voulez.</p>
    </div>
    <style type="text/css"><!--
    #comm{position:absolute; z-index:1; width:350px; height:200px; background:rgba(128,128,128,0.5);border:3px double black; box-shadow:4px 4px black; transform:translate(220px,170px); text-align:center; font-size:14pt; }
    #f1{ position:absolute; z-index:1;transition:all 1s linear;transform:translate(10px,30px); width:160px; height:120px; box-shadow:3px 3px 6px black; background:url(http://ekladata.com/HtjOwZsFfkXBjnEh4vFNlh0W7_8/6701.jpg); background-size:cover;}
    #f1:focus { position:absolute; z-index:2;transition:all 1s linear;transform:translate(0px,0px); width:800px; height:600px; background-size:cover; box-shadow:0px 0px 0px black;}
    #f2{ position:absolute;z-index:1;transition:all 1s linear;transform:translate(10px,220px); width:160px; height:120px; box-shadow:3px 3px 6px black; background:url(http://ekladata.com/vTzjhnU5nJDXYdtWsowA3uX5FgA/6703.jpg); background-size:cover;}
    #f2:focus { position:absolute; z-index:2;transition:all 1s linear;transform:translate(0px,-10px); width:800px; height:600px; background-size:cover; box-shadow:0px 0px 0px black;}
    #f3{ position:absolute; z-index:1;transition:all 1s linear;transform:translate(10px,410px); width:160px; height:120px; box-shadow:3px 3px 6px black; background:url(http://ekladata.com/zky7xRKDvqEdez-9KSbUdmrIQ7o/6704.jpg); background-size:cover;}
    #f3:focus { position:absolute;z-index:2;transition:all 1s linear;transform:translate(0px,-10px); width:800px; height:600px; background-size:cover; box-shadow:0px 0px 0px black;}
    #f4{ position:absolute; z-index:1;transition:all 1s linear;transform:translate(310px,20px); width:160px; height:120px; box-shadow:3px 3px 6px black; background:url(http://ekladata.com/-GHMNyH_S-ERPVBGm5jH7TpSEso/6705.jpg); background-size:cover; border-radius:25%;}
    #f4:focus { position:absolute;z-index:2;transition:all 1s linear;transform:translate(0px,-10px); width:800px; height:600px; background-size:cover; box-shadow:0px 0px 0px black; border-radius:0%;}
    #f5{ position:absolute; z-index:1;transition:all 1s linear;transform:translate(310px,410px); width:160px; height:120px; box-shadow:3px 3px 6px black; border-radius:25%; background:url(http://ekladata.com/EpvUBiABHBADte6U7u8BifVdKD0/6708.jpg); background-size:cover;}
    #f5:focus { position:absolute;z-index:2;transition:all 1s linear;transform:translate(0px,-10px); width:800px; height:600px; background-size:cover; box-shadow:0px 0px 0px black; border-radius:0%; }
    #f6{ position:absolute; z-index:1;transition:all 1s linear;transform:translate(620px,30px); width:160px; height:120px; box-shadow:3px 3px 6px black; border-radius:50%; background:url(http://ekladata.com/d5LvAne4TawTlEJZ_Giups5DhzA/6710.jpg); background-size:cover;}
    #f6:focus { position:absolute;z-index:2;transition:all 1s linear;transform:translate(0px,-10px); width:800px; height:600px; background-size:cover; box-shadow:0px 0px 0px black; border-radius:0%;}
    #f7{ position:absolute; z-index:1;transition:all 1s linear;transform:translate(620px,220px); width:160px; height:120px; box-shadow:3px 3px 6px black; border-radius:50%; background:url(http://ekladata.com/39BmCDz0867wF001qweJNdOOyaw/6711.jpg); background-size:cover;}
    #f7:focus { position:absolute;z-index:2;transition:all 1s linear;transform:translate(0px,-10px); width:800px; height:600px; background-size:cover; box-shadow:0px 0px 0px black; border-radius:0%;}
    #f8{ position:absolute; z-index:1;transition:all 1s linear;transform:translate(620px,410px); width:160px; height:120px; box-shadow:3px 3px 6px black; border-radius:50%; background:url(http://ekladata.com/siXcZp33zWlVkrk2KkFJmUmrjxo/6712.jpg); background-size:cover;}
    #f8:focus { position:absolute;z-index:2;transition:all 1s linear;transform:translate(0px,-10px); width:800px; height:600px; background-size:cover; box-shadow:0px 0px 0px black; border-radius:0%; }
    --></style>


    Ce qui, pour simplifier sur une seule image.
    <p><input id="f1" type="text" /></p>
    <style type="text/css"><!--
    #f1{ position:absolute; z-index:1;transition:all 1s linear;transform:translate(10px,30px); width:160px; height:120px; box-shadow:3px 3px 6px black; background:url(http://ekladata.com/HtjOwZsFfkXBjnEh4vFNlh0W7_8/6701.jpg); background-size:cover;}
    #f1:focus { position:absolute; z-index:2;transition:all 1s linear;transform:translate(0px,0px); width:800px; height:600px; background-size:cover; box-shadow:0px 0px 0px black;}
    --></style>
    ...