-
Variante pour Christine
Article publié avec son code.
12 images en 1150x647px en bleu + fond en vert.
<div id="qq"><input id="out" type="text" value="X" /> <input id="k1a" class="ka" type="text" /><span id="k1b" class="ka"> </span> <span id="k1c" class="ka"> </span> <input id="k2a" class="kb" type="text" /><span id="k2b" class="kb"> </span> <span id="k2c" class="kb"> </span> <input id="k3a" class="kc" type="text" /><span id="k3b" class="kc"> </span> <span id="k3c" class="kc"> </span> <input id="k4a" class="kd" type="text" /><span id="k4b" class="kd"> </span> <span id="k4c" class="kd"> </span> <input id="k5a" class="ke" type="text" /><span id="k5b" class="ke"> </span> <span id="k5c" class="ke"> </span> <input id="k6a" class="kf" type="text" /><span id="k6b" class="kf"> </span> <span id="k6c" class="kf"> </span> <input id="k7a" class="kg" type="text" /><span id="k7b" class="kg"> </span> <span id="k7c" class="kg"> </span> <input id="k8a" class="kh" type="text" /><span id="k8b" class="kh"> </span> <span id="k8c" class="kh"> </span> <input id="k9a" class="kj" type="text" /><span id="k9b" class="kj"> </span> <span id="k9c" class="kj"> </span> <input id="k10a" class="kk" type="text" /><span id="k10b" class="kk"> </span> <span id="k10c" class="kk"> </span> <input id="k11a" class="kl" type="text" /><span id="k11b" class="kl"> </span> <span id="k11c" class="kl"> </span> <input id="k12a" class="km" type="text" /><span id="k12b" class="km"> </span> <span id="k12c" class="km"> </span></div>
<style><!--
#qq{position:relative; width:1150px; height:647px; margin:5px auto; background:url(http://ekladata.com/fANN1U2GQVzj4OLNC8B9vO9WPd4.jpg);}
#out{position:absolute; z-index:10; width:23px; height:30px; text-align:center; font-size:20pt; color:red !important; text-shadow:1px 1px black; transform:translate(1120px,0px);}.ka{background:url(http://ekladata.com/EjxTxWB9TxbBh6HRnC6YPmaWZzE.jpg );}
#k1a{position:absolute; z-index:2; transform:translate(110px,30px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k1b{position:absolute; z-index:1; transform:translate(110px,230px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k1c{position:absolute; z-index:1; transform:translate(110px,430px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k1a:focus{ z-index:5; width:1150px; height:215px; transform:translate(0px,1px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k1a:focus ~ #k1b{ z-index:5; width:1150px; height:215px; transform:translate(0px,215px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k1a:focus ~ #k1c{ z-index:5; width:1150px; height:217px; transform:translate(0px,430px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}.kb{background:url(http://ekladata.com/59tioe3bhTH-wMxLUuV3LonRjlo.jpg);}
#k2a{position:absolute; z-index:2; transform:translate(370px,30px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k2b{position:absolute; z-index:1; transform:translate(370px,230px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k2c{position:absolute; z-index:1; transform:translate(370px,430px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k2a:focus{ z-index:5; width:1150px; height:215px; transform:translate(0px,1px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k2a:focus ~ #k2b{ z-index:5; width:1150px; height:215px; transform:translate(0px,215px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k2a:focus ~ #k2c{ z-index:5; width:1150px; height:217px; transform:translate(0px,430px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}.kc{background:url(http://ekladata.com/PP3KqfeZeIFW06IRNyP4PJEZN1I.jpg );}
#k3a{position:absolute; z-index:2; transform:translate(630px,30px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k3b{position:absolute; z-index:1; transform:translate(630px,230px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k3c{position:absolute; z-index:1; transform:translate(630px,430px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k3a:focus{ z-index:5; width:1150px; height:215px; transform:translate(0px,1px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k3a:focus ~ #k3b{ z-index:5; width:1150px; height:215px; transform:translate(0px,215px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k3a:focus ~ #k3c{ z-index:5; width:1150px; height:217px; transform:translate(0px,430px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}.kd{background:url(http://ekladata.com/wqMsO3hMOc7AkD1FPc0xs_R_xJQ.jpg );}
#k4a{position:absolute; z-index:2; transform:translate(890px,30px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k4b{position:absolute; z-index:1; transform:translate(890px,230px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k4c{position:absolute; z-index:1; transform:translate(890px,430px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k4a:focus{ z-index:5; width:1150px; height:215px; transform:translate(0px,1px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k4a:focus ~ #k4b{ z-index:5; width:1150px; height:215px; transform:translate(0px,215px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k4a:focus ~ #k4c{ z-index:5; width:1150px; height:217px; transform:translate(0px,430px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}.ke{background:url(http://ekladata.com/rBA8O3J81YB0yTVxZWBWYZak77o.jpg);}
#k5a{position:absolute; z-index:2; transform:translate(110px,230px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k5b{position:absolute; z-index:1; transform:translate(110px,30px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k5c{position:absolute; z-index:1; transform:translate(110px,430px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k5a:focus{ z-index:5; width:1150px; height:215px; transform:translate(0px,1px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k5a:focus ~ #k5b{ z-index:5; width:1150px; height:215px; transform:translate(0px,215px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k5a:focus ~ #k5c{ z-index:5; width:1150px; height:217px; transform:translate(0px,430px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}.kf{background:url(http://ekladata.com/Iy9rutRJl7PdPbxUVuvr2RpiWec.jpg);}
#k6a{position:absolute; z-index:2; transform:translate(370px,230px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k6b{position:absolute; z-index:1; transform:translate(370px,30px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k6c{position:absolute; z-index:1; transform:translate(370px,430px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k6a:focus{ z-index:5; width:1150px; height:215px; transform:translate(0px,1px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k6a:focus ~ #k6b{ z-index:5; width:1150px; height:215px; transform:translate(0px,215px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k6a:focus ~ #k6c{ z-index:5; width:1150px; height:217px; transform:translate(0px,430px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}.kg{background:url(http://ekladata.com/qC-vnj6gJJkpB2yXCn87BmbGI6A.jpg);}
#k7a{position:absolute; z-index:2; transform:translate(630px,230px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k7b{position:absolute; z-index:1; transform:translate(630px,30px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k7c{position:absolute; z-index:1; transform:translate(630px,430px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k7a:focus{ z-index:5; width:1150px; height:215px; transform:translate(0px,1px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k7a:focus ~ #k7b{ z-index:5; width:1150px; height:215px; transform:translate(0px,215px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k7a:focus ~ #k7c{ z-index:5; width:1150px; height:217px; transform:translate(0px,430px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}.kh{background:url(http://ekladata.com/usEcNz9qpPc6y1c4Bwbm2av6q4c.jpg);}
#k8a{position:absolute; z-index:2; transform:translate(890px,230px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k8b{position:absolute; z-index:1; transform:translate(890px,30px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k8c{position:absolute; z-index:1; transform:translate(890px,430px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k8a:focus{ z-index:5; width:1150px; height:215px; transform:translate(0px,1px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k8a:focus ~ #k8b{ z-index:5; width:1150px; height:215px; transform:translate(0px,216px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k8a:focus ~ #k8c{ z-index:5; width:1150px; height:217px; transform:translate(0px,430px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}.kj{background:url(http://ekladata.com/9mEvmf5I83CKTjuSraJUZbjBoEw.jpg);}
#k9a{position:absolute; z-index:2; transform:translate(110px,430px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k9b{position:absolute; z-index:1; transform:translate(110px,30px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k9c{position:absolute; z-index:1; transform:translate(110px,230px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k9a:focus{ z-index:5; width:1150px; height:215px; transform:translate(0px,1px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k9a:focus ~ #k9b{ z-index:5; width:1150px; height:215px; transform:translate(0px,215px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k9a:focus ~ #k9c{ z-index:5; width:1150px; height:217px; transform:translate(0px,430px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}.kk{background:url(http://ekladata.com/OcEigQDZIBpijhkE6ftRykvps_Y.jpg);}
#k10a{position:absolute; z-index:2; transform:translate(370px,430px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k10b{position:absolute; z-index:1; transform:translate(370px,30px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k10c{position:absolute; z-index:1; transform:translate(370px,230px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k10a:focus{ z-index:5; width:1150px; height:215px; transform:translate(0px,1px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k10a:focus ~ #k10b{ z-index:5; width:1150px; height:215px; transform:translate(0px,215px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k10a:focus ~ #k10c{ z-index:5; width:1150px; height:217px; transform:translate(0px,430px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}.kl{background:url(http://ekladata.com/N6uElGr0KSt8udULmBt-EmwfNc4.jpg);}
#k11a{position:absolute; z-index:2; transform:translate(630px,430px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k11b{position:absolute; z-index:1; transform:translate(630px,30px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k11c{position:absolute; z-index:1; transform:translate(630px,230px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k11a:focus{ z-index:5; width:1150px; height:215px; transform:translate(0px,1px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k11a:focus ~ #k11b{ z-index:5; width:1150px; height:215px; transform:translate(0px,215px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k11a:focus ~ #k11c{ z-index:5; width:1150px; height:217px; transform:translate(0px,430px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}.km{background:url(http://ekladata.com/XvGhq0cLOfZ3LQ_otfn-EgvCAlE.jpg);}
#k12a{position:absolute; z-index:2; transform:translate(890px,430px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:0% 0%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; border:none; box-sizing:border-box;}
#k12b{position:absolute; z-index:1; transform:translate(890px,30px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:50% 50%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k12c{position:absolute; z-index:1; transform:translate(890px,230px); width:150px; height:150px; border-radius:50%; transition:all 1s linear; background-position:100% 100%; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black;}
#k12a:focus{ z-index:5; width:1150px; height:215px; transform:translate(0px,1px); border-radius:0%; box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k12a:focus ~ #k12b{ z-index:5; width:1150px; height:215px; transform:translate(0px,215px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
#k12a:focus ~ #k12c{ z-index:5; width:1150px; height:217px; transform:translate(0px,430px); border-radius:0%;box-shadow:inset 0px 0px 0px white, inset 0px 0px 0px black;}
--></style>
montages par codes HTML/CSS
Créer mon blog