Montage 76

J'ai trouvé que la longueur du code Montage 75 risquait d'effrayer certain(e)s et voici le même principe, en transparence et avec une animation différente, plus simple à écrire.

Le montage est en 60% de la largeur de votre écran et les images au ratio 16/9, horizontales.

Votre descriptif et votre adresse image à écrire à la place des miens.

<div style="width:60vw; height:33.75vw; margin:1vh auto;">
<p id="txt0">Survol puis clic maintenu.</p>
<p id="txt1" class="txt">Descriptif Image 1</p>
<p id="txt2" class="txt">Descriptif Image 2</p>
<p id="txt3" class="txt">Descriptif Image 3</p>
<p id="txt4" class="txt">Descriptif Image 4</p>
<p id="txt5" class="txt">Descriptif Image 5</p>
<p id="txt6" class="txt">Descriptif Image 6</p>
<p id="txt7" class="txt">Descriptif Image 7</p>
<p id="txt8" class="txt">Descriptif Image 8</p>
<p id="txt9" class="txt">Descriptif Image 9</p>
<p id="mg1" class="mg">&nbsp;</p>
<p id="mg2" class="mg">&nbsp;</p>
<p id="mg3" class="mg">&nbsp;</p>
<p id="mg4" class="mg">&nbsp;</p>
<p id="mg5" class="mg">&nbsp;</p>
<p id="mg6" class="mg">&nbsp;</p>
<p id="mg7" class="mg">&nbsp;</p>
<p id="mg8" class="mg">&nbsp;</p>
<p id="mg9" class="mg">&nbsp;</p>
</div>
<hr style="border:0.3vh double grey;">
...
<style><!--
#txt0{position:absolute; z-index:1; width:30vw; font-size:1vw; color:coral; text-shadow:0.1vh 0.1vh black; transform:translate(15vw,0vw);}
.txt{position:absolute; z-index:1; width:16vw; height:9vw; background:linear-gradient(to bottom, rgba(150,100,50,0.8)0%, rgba(100,50,0,0.2)100%); border:0.3vh ridge white; padding:0.3vh; box-shadow:0.3vh 0.3vh 0.6vh black; text-align:center;font-size:1w; color:white;}
#txt1{box-sizing:border-box; transform:translate(3vw,1.7vw);}
#txt2{box-sizing:border-box;transform:translate(22vw,1.7vw);}
#txt3{box-sizing:border-box;transform:translate(41vw,1.7vw);}
#txt4{box-sizing:border-box; transform:translate(3vw,12.5vw);}
#txt5{box-sizing:border-box;transform:translate(22vw,12.5vw);}
#txt6{box-sizing:border-box;transform:translate(41vw,12.5vw);}
#txt7{box-sizing:border-box; transform:translate(3vw,23.25vw);}
#txt8{box-sizing:border-box;transform:translate(22vw,23.25vw);}
#txt9{box-sizing:border-box;transform:translate(41vw,23.25vw);}
.mg{position:absolute; z-index:1; width:16vw; height:9vw; opacity:0; transition:all 1s linear;}
#mg1{background:url('http://ekladata.com/jsK_xOdancGHIPGYB-0siqcb9GE.jpg'); background-size:cover;transform:translate(3vw,1.7vw);}
#mg2{background:url('http://ekladata.com/X6gEBO88OFJOALBYNwsdhleaMZI.jpg'); background-size:cover;transform:translate(22vw,1.7vw);}
#mg3{background:url('http://ekladata.com/xmQDmuMOjPU3dHTXAr21sChzSMA.jpg'); background-size:cover;transform:translate(41vw,1.7vw);}
#mg4{background:url('http://ekladata.com/zM2bclggCCKeS7uLaznyijRihH4.jpg'); background-size:cover;transform:translate(3vw,12.5vw);}
#mg5{background:url('http://ekladata.com/i1m-wCxOYeWvGKI3CRUHcCFmJu4.jpg'); background-size:cover;transform:translate(22vw,12.5vw);}
#mg6{background:url('http://ekladata.com/6nLgV-i-76M0_dZDxTtd7RQ4xVo.jpg'); background-size:cover;transform:translate(41vw,12.5vw);}
#mg7{background:url('http://ekladata.com/4Ttj7u9daDHfk7XtKQzvh5TcqCc.jpg'); background-size:cover;transform:translate(3vw,23.25vw);}
#mg8{background:url('http://ekladata.com/Eyxy4FYMJr5IaYH6pIrEWpcAdCs.jpg'); background-size:cover;transform:translate(22vw,23.25vw);}
#mg9{background:url('http://ekladata.com/pSVnGGdAzMN5yDZwEA2EXAnBLX4.jpg'); background-size:cover;transform:translate(41vw,23.25vw);}
#mg1:hover,#mg2:hover,#mg3:hover,#mg4:hover,#mg5:hover,#mg6:hover,#mg7:hover,#mg8:hover,#mg9:hover{z-index:5; opacity:1;}
#mg1:active,#mg2:active,#mg3:active,#mg4:active,#mg5:active,#mg6:active,#mg7:active,#mg8:active,#mg9:active{width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
--></style>