-
Exemple 81
Clic sur le rond bordure noire; retour par un clic hors montage ou hors du rond bordure noire agrandi.
Beaucoup de lignes car chaque image est découpée en 4 parties. 6 images au ratio 16/9 redimensionnées en 1000x563px.
<div style="width: 1000px; height: 563px; border: 1px solid black; margin: 5px auto; text-align: left; background: url('http://ekladata.com/t1NULBQmb10F6yPCD9Fl1elPTvI.jpg'); background-size:cover;"><input id="quart1" class="quarta" type="text" /><input id="quart2" class="quartb" type="text" /><input id="quart3" class="quartc" type="text" /><input id="quart4" class="quartd" type="text" /><input id="quart5" class="quarte" type="text" /><input id="quart6" class="quartf" type="text" />
<p id="qt1a" class="qta"> </p>
<p id="qt1b" class="qta"> </p>
<p id="qt1c" class="qta"> </p>
<p id="qt2a" class="qtb"> </p>
<p id="qt2b" class="qtb"> </p>
<p id="qt2c" class="qtb"> </p>
<p id="qt3a" class="qtc"> </p>
<p id="qt3b" class="qtc"> </p>
<p id="qt3c" class="qtc"> </p>
<p id="qt4a" class="qtd"> </p>
<p id="qt4b" class="qtd"> </p>
<p id="qt4c" class="qtd"> </p>
<p id="qt5a" class="qte"> </p>
<p id="qt5b" class="qte"> </p>
<p id="qt5c" class="qte"> </p>
<p id="qt6a" class="qtf"> </p>
<p id="qt6b" class="qtf"> </p>
<p id="qt6c" class="qtf"> </p>
</div>
<style><!--
.quarta{position:absolute; z-index:1; width:80px; height:80px; border-radius:50%; background:url('http://ekladata.com/QXumgpThb7E6fZdUyG11Ex4M9Ss@1000x563.jpg'); border:3px solid black; filter:grayscale(1); transition:all 1s linear;}
.quartb{position:absolute; z-index:1; width:80px; height:80px; border-radius:50%; background:url('http://ekladata.com/2rShsh20zufz2JkYGBWFnSJxw90@1000x563.jpg'); border:3px solid black; filter:grayscale(1); transition:all 1s linear;}
.quartc{position:absolute; z-index:1; width:80px; height:80px; border-radius:50%; background:url('http://ekladata.com/yEUFCmunwoIZ7CJShsaE7f_Hi7k@1000x563.jpg'); border:3px solid black; filter:grayscale(1); transition:all 1s linear;}
.quartd{position:absolute; z-index:1; width:80px; height:80px; border-radius:50%; background:url('http://ekladata.com/CAO0lbkfFpRUq5SS_0o5prTtJp0@1000x563.jpg'); border:3px solid black; filter:grayscale(1); transition:all 1s linear;}
.quarte{position:absolute; z-index:1; width:80px; height:80px; border-radius:50%; background:url('http://ekladata.com/F-ZZVNdHDCx-vFlnCvlCu2YJNwo@1000x563.jpg'); border:3px solid black; filter:grayscale(1); transition:all 1s linear;}
.quartf{position:absolute; z-index:1; width:80px; height:80px; border-radius:50%; background:url('http://ekladata.com/gxZywFKt3U-lHU_76QgUS-gZiG4@1000x563.jpg'); border:3px solid black; filter:grayscale(1); transition:all 1s linear;}
.qta{position:absolute; z-index:1; width:80px; height:80px; border-radius:50%; background:url('http://ekladata.com/QXumgpThb7E6fZdUyG11Ex4M9Ss@1000x563.jpg'); border:3px solid white; filter:grayscale(1); transition:all 1s linear;}
.qtb{position:absolute; z-index:1; width:80px; height:80px; border-radius:50%; background:url('http://ekladata.com/2rShsh20zufz2JkYGBWFnSJxw90@1000x563.jpg'); border:3px solid white; filter:grayscale(1); transition:all 1s linear;}
.qtc{position:absolute; z-index:1; width:80px; height:80px; border-radius:50%; background:url('http://ekladata.com/yEUFCmunwoIZ7CJShsaE7f_Hi7k@1000x563.jpg'); border:3px solid white; filter:grayscale(1); transition:all 1s linear;}
.qtd{position:absolute; z-index:1; width:80px; height:80px; border-radius:50%; background:url('http://ekladata.com/CAO0lbkfFpRUq5SS_0o5prTtJp0@1000x563.jpg'); border:3px solid white; filter:grayscale(1); transition:all 1s linear;}
.qte{position:absolute; z-index:1; width:80px; height:80px; border-radius:50%; background:url('http://ekladata.com/F-ZZVNdHDCx-vFlnCvlCu2YJNwo@1000x563.jpg'); border:3px solid white; filter:grayscale(1); transition:all 1s linear;}
.qtf{position:absolute; z-index:1; width:80px; height:80px; border-radius:50%; background:url('http://ekladata.com/gxZywFKt3U-lHU_76QgUS-gZiG4@1000x563.jpg'); border:3px solid white; filter:grayscale(1); transition:all 1s linear;}#quart1{background-position:-500px 0px; transform:translate(160px,20px);}
#qt1a{background-position:0px 0px; transform:translate(50px,20px);}
#qt1b{background-position:0px -283px; transform:translate(50px,130px);}
#qt1c{background-position:-500px -283px; transform:translate(160px,130px);}
#quart2{background-position:-500px 0px; transform:translate(515px,20px);}
#qt2a{background-position:0px 0px; transform:translate(405px,20px);}
#qt2b{background-position:0px -283px; transform:translate(405px,130px);}
#qt2c{background-position:-500px -283px; transform:translate(515px,130px);}
#quart3{background-position:-500px 0px; transform:translate(870px,20px);}
#qt3a{background-position:0px 0px; transform:translate(760px,20px);}
#qt3b{background-position:0px -283px; transform:translate(760px,130px);}
#qt3c{background-position:-500px -283px; transform:translate(870px,130px);}
#quart4{background-position:-500px 0px; transform:translate(160px,350px);}
#qt4a{background-position:0px 0px; transform:translate(50px,350px);}
#qt4b{background-position:0px -283px; transform:translate(50px,460px);}
#qt4c{background-position:-500px -283px; transform:translate(160px,460px);}
#quart5{background-position:-500px 0px; transform:translate(515px,350px);}
#qt5a{background-position:0px 0px; transform:translate(405px,350px);}
#qt5b{background-position:0px -283px; transform:translate(405px,460px);}
#qt5c{background-position:-500px -283px; transform:translate(515px,460px);}
#quart6{background-position:-500px 0px; transform:translate(870px,350px);}
#qt6a{background-position:0px 0px; transform:translate(760px,350px);}
#qt6b{background-position:0px -283px; transform:translate(760px,460px);}
#qt6c{background-position:-500px -283px; transform:translate(870px,460px);}#quart1:focus,#quart2:focus,#quart3:focus,#quart4:focus,#quart5:focus,#quart6:focus{z-index:5; width:500px; height:283px; border-radius:0%; border:none; filter:grayscale(0); transform:translate(500px,0px);}
#quart1:focus ~ #qt1a,#quart2:focus ~ #qt2a,#quart3:focus ~ #qt3a,#quart4:focus ~ #qt4a,#quart5:focus ~ #qt5a,#quart6:focus ~ #qt6a{z-index:5; width:500px; height:283px; border-radius:0%; border:none; filter:grayscale(0); transform:translate(0px,0px);}
#quart1:focus ~ #qt1b,#quart2:focus ~ #qt2b,#quart3:focus ~ #qt3b,#quart4:focus ~ #qt4b,#quart5:focus ~ #qt5b,#quart6:focus ~ #qt6b{z-index:5; width:500px; height:280px; border-radius:0%; border:none; filter:grayscale(0); transform:translate(0px,283px);}
#quart1:focus ~ #qt1c,#quart2:focus ~ #qt2c,#quart3:focus ~ #qt3c,#quart4:focus ~ #qt4c,#quart5:focus ~ #qt5c,#quart6:focus ~ #qt6c{z-index:5; width:500px; height:280px; border-radius:0%; border:none; filter:grayscale(0); transform:translate(500px,283px);}
--></style>
montages par codes HTML/CSS
Créer mon blog