Montage 71

Variante du montage 70.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge white; background: linear-gradient(to bottom, rgba(150,100,50,1) 0%, rgba(150,100,50,0.5)100%);">
<p id="bc1" class="bc">&nbsp;</p>
<p id="bc2" class="bc">&nbsp;</p>
<p id="bc3" class="bc">&nbsp;</p>
<p id="bc4" class="bc">&nbsp;</p>
<p id="bc5" class="bc">&nbsp;</p>
<p id="bc6" class="bc">&nbsp;</p>
<p id="bc7" class="bc">&nbsp;</p>
<p id="bc8" class="bc">&nbsp;</p>
<p id="bc9" class="bc">&nbsp;</p>
<p id="bc10" class="bc">&nbsp;</p>
<p id="cc">Survol puis clic maintenu. Rel&acirc;chez le clic en restant sur l'image.</p>
</div>
<style><!--
#cc{position:absolute; z-index:1;width:60vw; text-align:center; font-size:1.2vw; color:white; text-shadow:0.1vh 0.1vh brown; transform:translate(1vw,1vw);}
.bc{position:absolute; z-index:1;width:32vw; height:18vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.8vh black;transform-origin:left center; transition:all 1s linear; filter:grayscale(1); webkit-filter:grayscale(1);}
#bc1{box-sizing:border-box; background:url('http://ekladata.com/vqtFQQ68ONNU9UGCcLfdYa22NIQ.jpg'); background-size:cover; transform:translate(3vw,8vw) perspective(12vw) rotatey(60deg);}
#bc2{box-sizing:border-box; background:url('http://ekladata.com/EEdpTyrXTjC7w31Mdv5VSjjquXI.jpg'); background-size:cover; transform:translate(7vw,8vw) perspective(15vw) rotatey(60deg);}
#bc3{box-sizing:border-box; background:url('http://ekladata.com/6goGjiVX34ZMVWQ6nLaatHxqNz0.jpg'); background-size:cover; transform:translate(12vw,8vw) perspective(15vw) rotatey(60deg);}
#bc4{box-sizing:border-box; background:url('http://ekladata.com/oI6uPWeMEmqdEbML_jBrTt65zgo.jpg'); background-size:cover; transform:translate(17vw,8vw) perspective(15vw) rotatey(60deg);}
#bc5{box-sizing:border-box; background:url('http://ekladata.com/zIAORRrfOvJTUsqwSLe_CcLVvVI.jpg'); background-size:cover; transform:translate(22vw,8vw) perspective(15vw) rotatey(60deg);}
#bc6{box-sizing:border-box; background:url('http://ekladata.com/PpAIUPsTLfr4SnRc1nloJT0-Txw.jpg'); background-size:cover; transform:translate(27vw,8vw) perspective(15vw) rotatey(60deg);}
#bc7{box-sizing:border-box; background:url('http://ekladata.com/-NJyJRd4aTLcaJuIFjiOX7Ef00o.jpg'); background-size:cover; transform:translate(32vw,8vw) perspective(15vw) rotatey(60deg);}
#bc8{box-sizing:border-box; background:url('http://ekladata.com/RT9TWPGiaX1GuyyYmZ6OKQJ3Qlg.jpg'); background-size:cover; transform:translate(37vw,8vw) perspective(15vw) rotatey(60deg);}
#bc9{box-sizing:border-box; background:url('http://ekladata.com/65l5fzI-IfAYPaK_5PEgMO11-WU.jpg'); background-size:cover; transform:translate(42vw,8vw) perspective(15vw) rotatey(60deg);}
#bc10{box-sizing:border-box; background:url('http://ekladata.com/iqIqMOZceKgWHepSQuzCZMfYIPQ.jpg'); background-size:cover; transform:translate(47vw,8vw) perspective(15vw) rotatey(60deg);}
#bc1:hover{z-index:5; transform:translate(3vw,8vw) perspective(150vw) rotatey(0deg); border-radius:0%; filter:grayscale(0); webkit-filter:grayscale(0);}
#bc2:hover{z-index:5; transform:translate(8vw,8vw) perspective(150vw) rotatey(0deg); border-radius:0%; filter:grayscale(0); webkit-filter:grayscale(0);}
#bc3:hover{z-index:5; transform:translate(10vw,8vw) perspective(150vw) rotatey(0deg); border-radius:0%; filter:grayscale(0); webkit-filter:grayscale(0);}
#bc4:hover{z-index:5; transform:translate(12vw,8vw) perspective(150vw) rotatey(0deg); border-radius:0%; filter:grayscale(0); webkit-filter:grayscale(0);}
#bc5:hover{z-index:5; transform:translate(16vw,8vw) perspective(150vw) rotatey(0deg); border-radius:0%; filter:grayscale(0); webkit-filter:grayscale(0);}
#bc6:hover{z-index:5; transform:translate(18vw,8vw) perspective(150vw) rotatey(0deg); border-radius:0%; filter:grayscale(0); webkit-filter:grayscale(0);}
#bc7:hover{z-index:5; transform:translate(20vw,8vw) perspective(150vw) rotatey(0deg); border-radius:0%; filter:grayscale(0); webkit-filter:grayscale(0);}
#bc8:hover{z-index:5; transform:translate(22vw,8vw) perspective(150vw) rotatey(0deg); border-radius:0%; filter:grayscale(0); webkit-filter:grayscale(0);}
#bc9:hover{z-index:5; transform:translate(24vw,8vw) perspective(150vw) rotatey(0deg); border-radius:0%; filter:grayscale(0); webkit-filter:grayscale(0);}
#bc10:hover{z-index:5; transform:translate(26vw,8vw) perspective(150vw) rotatey(0deg); border-radius:0%; filter:grayscale(0); webkit-filter:grayscale(0);}
#bc1:active,#bc2:active,#bc3:active,#bc4:active,#bc5:active,#bc6:active,#bc7:active,#bc8:active,#bc9:active,#bc10:active{width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
--></style>