Montage 127

Montage en 60% de la largeur de votre écran et images agrandies à 100% de votre écran.

La particularité est peut-être la couleur de fond en 2 tons.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; background: linear-gradient(to right, #FAEBD7 0%,#FAEBD7 80%,#DEB887 80%,#DEB887 100%); border: 0.6vh ridge grey;">
<p id="tt1">En me promenant sur les bords du lac de retenue du barrage de Serre-Pon&ccedil;on, j'ai cru me trouver sur les bords d'un lac italien.<br />Le soleil brillait et donnait de jolis reflets &agrave; la surface de l'eau.<br /><br />Ce montage pour apprendre &agrave; ma&icirc;triser les images en plein &eacute;cran.<br />En cliquant sur la touche de fonction F11 de votre clavier, pour cacherez les barres sup&eacute;rieures pour afficher les images en plein &eacute;cran.<br /><br />La largeur est en 60% de la largeur de votre &eacute;cran, quel qu'il soit.</p>
<p id="tt2">Clic maintenu.</p>
<p id="pt1" class="pt">&nbsp;</p>
<p id="pt2" class="pt">&nbsp;</p>
<p id="pt3" class="pt">&nbsp;</p>
<p id="pt4" class="pt">&nbsp;</p>
<p id="pt5" class="pt">&nbsp;</p>
<p id="pt6" class="pt">&nbsp;</p>
<p id="pt7" class="pt">&nbsp;</p>
<p id="pt8" class="pt">&nbsp;</p>
<p id="gd1" class="gd">&nbsp;</p>
<p id="gd2" class="gd">&nbsp;</p>
<p id="gd3" class="gd">&nbsp;</p>
<p id="gd4" class="gd">&nbsp;</p>
<p id="gd5" class="gd">&nbsp;</p>
<p id="gd6" class="gd">&nbsp;</p>
<p id="gd7" class="gd">&nbsp;</p>
<p id="gd8" class="gd">&nbsp;</p>
</div>
<style><!--
#tt1{position:absolute; z-index:1; text-align:center; width:45vw; height:25vw; font-size:1.2vw; transform:translate(2vw,5vw);}
#tt2{position:absolute; z-index:1; text-align:center; width:10vw; height:1.5vw; font-size:1.2vw; transform:translate(35vw,0.5vw); background:lime;}
.pt{position:absolute; border:0.3vh solid white; width:6vw; height:3.75vw; box-shadow:0.4vh 0.4vh 0.6vh black;}
#pt1{box-sizing:border-box; transform:translate(49vw,1vw); background:url('http://ekladata.com/J4qOnHsCn3u1bcGb9KKoO0t2VJI@80x45.jpg'); background-size:cover;}
#pt2{box-sizing:border-box; transform:translate(52vw,5vw); background:url('http://ekladata.com/WsMMKASYmlsPsA2H5J4uPgXtVLY@80x45.jpg'); background-size:cover;}
#pt3{box-sizing:border-box; transform:translate(49vw,9vw); background:url('http://ekladata.com/Mr-pTdPxeh_SIAzz3NYsDswyrDQ@80x45.jpg'); background-size:cover;}
#pt4{box-sizing:border-box; transform:translate(52vw,13vw); background:url('http://ekladata.com/mYLbwQnd7JL2SGT9vNPM7eySzzo@80x45.jpg'); background-size:cover;}
#pt5{box-sizing:border-box; transform:translate(49vw,17vw); background:url('http://ekladata.com/w00d-mgbPlgjchHWdjwmD0k9IdI@80x45.jpg'); background-size:cover;}
#pt6{box-sizing:border-box; transform:translate(52vw,21vw); background:url('http://ekladata.com/Egojc2vmdwitulTftHJcRT7dZxo@80x45.jpg'); background-size:cover;}
#pt7{box-sizing:border-box; transform:translate(49vw,25vw); background:url('http://ekladata.com/3mbsy091XJGhEssM9fg9OaW92To@80x45.jpg'); background-size:cover;}
#pt8{box-sizing:border-box; transform:translate(52vw,29vw); background:url('http://ekladata.com/O_XctNU6A0puUx0o5FNX7YA1Zf8@80x45.jpg'); background-size:cover;}
.gd{position:fixed; z-index:5; width:0vw; height:56.25vw; top:0; left:0; transition:all 1s linear;}
#gd1{background:url('http://ekladata.com/J4qOnHsCn3u1bcGb9KKoO0t2VJI.jpg');}
#gd2{background:url('http://ekladata.com/WsMMKASYmlsPsA2H5J4uPgXtVLY.jpg');}
#gd3{background:url('http://ekladata.com/Mr-pTdPxeh_SIAzz3NYsDswyrDQ.jpg');}
#gd4{background:url('http://ekladata.com/mYLbwQnd7JL2SGT9vNPM7eySzzo.jpg');}
#gd5{background:url('http://ekladata.com/w00d-mgbPlgjchHWdjwmD0k9IdI.jpg');}
#gd6{background:url('http://ekladata.com/Egojc2vmdwitulTftHJcRT7dZxo.jpg');}
#gd7{background:url('http://ekladata.com/3mbsy091XJGhEssM9fg9OaW92To.jpg');}
#gd8{background:url('http://ekladata.com/O_XctNU6A0puUx0o5FNX7YA1Zf8.jpg');}
#pt1:active ~ #gd1,#pt2:active ~ #gd2,#pt3:active ~ #gd3,#pt4:active ~ #gd4,#pt5:active ~ #gd5,#pt6:active ~ #gd6,#pt7:active ~ #gd7,#pt8:active ~ #gd8{width:100vw;}
--></style>