-
Montage 75
Le code va vous paraître long mais, regardez-le bien, les lignes sont très répétitives; ici, pour 9 images en 16/9 horizontales.
Changez les descriptifs de chaque image; changez l'adresse de chaque image ... et pi c'est tout !
Modifiez la taille de la police du descriptif si votre texte dépasse du cadre et les couleurs.
On m'a demandé comment mettre un commentaire sur une image; voici une façon.
Le survol de chaque cadre le fait se retourner pour laisser apparaître une image, correspondant au texte.Le clic maintenu sur l'image l'agrandit.
Ce montage peut permettre d'écrire le descriptif d'une image puis de la faire apparaître et s'agrandir.
Légende 4
Légende 5
Légende 6
Légende 7.
Légende 8
Légende 9
<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge white; background: linear-gradient(to bottom, rgba(150,200,150,0.8) 0%, rgba(200,150,100,0.2) 100%);">
<div id="zone1">
<p id="av1">On m'a demandé comment mettre un commentaire sur une image; voici une façon.</p>
<p id="ar1"> </p>
</div>
<div id="zone2">
<p id="av2">Le survol de chaque cadre le fait se retourner pour laisser apparaître une image, correspondant au texte.Le clic maintenu sur l'image l'agrandit.</p>
<p id="ar2"> </p>
</div>
<div id="zone3">
<p id="av3">Ce montage peut permettre d'écrire le descriptif d'une image puis de la faire apparaître et s'agrandir.</p>
<p id="ar3"> </p>
</div>
<div id="zone4">
<p id="av4">Légende 4</p>
<p id="ar4"> </p>
</div>
<div id="zone5">
<p id="av5">Légende 5</p>
<p id="ar5"> </p>
</div>
<div id="zone6">
<p id="av6">Légende 6</p>
<p id="ar6"> </p>
</div>
<div id="zone7">
<p id="av7">Légende 7.</p>
<p id="ar7"> </p>
</div>
<div id="zone8">
<p id="av8">Légende 8</p>
<p id="ar8"> </p>
</div>
<div id="zone9">
<p id="av9">Légende 9</p>
<p id="ar9"> </p>
</div>
</div>
<style><!--
#zone1{position:absolute; z-index:1; transform: preserve-3d perspective: 1000; width:16vw; height:9vw; transform:translate(3vw,1.7vw);}
#av1{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; background: linear-gradient(to bottom, rgba(150,200,0,0.8) 0%, rgba(200,150,0,0.2) 100%); text-align:center; font-size:1vw;transition:all 1s linear;}
#ar1{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transform: rotateY(180deg); border:0.2vh solid black; background:url('http://ekladata.com/rYREPI4ylvBI83C6M4QJMQbqV7U.jpg'); background-size:cover; transition:all 1s linear;}#zone2{position:absolute; z-index:1; transform: preserve-3d perspective: 1000; width:16vw; height:9vw; transform:translate(22vw,1.7vw);}
#av2{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; background: linear-gradient(to bottom, rgba(150,200,0,0.8) 0%, rgba(200,150,0,0.2) 100%); text-align:center; font-size:1vw;transition:all 1s linear;}
#ar2{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transform: rotateY(180deg); border:0.2vh solid black; background:url('http://ekladata.com/NZRre9fuTRWj5bzLRpZNv3xD_AE.jpg'); background-size:cover; transition:all 1s linear;}#zone3{position:absolute; z-index:1; transform: preserve-3d perspective: 1000; width:16vw; height:9vw; transform:translate(41vw,1.7vw);}
#av3{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; background: linear-gradient(to bottom, rgba(150,200,0,0.8) 0%, rgba(200,150,0,0.2) 100%); text-align:center; font-size:1vw;transition:all 1s linear;}
#ar3{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transform: rotateY(180deg); border:0.2vh solid black; background:url('http://ekladata.com/_TXUxE7RqZ27wlmCwMjoS3X1Tdo.jpg'); background-size:cover; transition:all 1s linear;}#zone4{position:absolute; z-index:1; transform: preserve-3d perspective: 1000; width:16vw; height:9vw; transform:translate(3vw,12.5vw);}
#av4{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; background: linear-gradient(to bottom, rgba(150,200,0,0.8) 0%, rgba(200,150,0,0.2) 100%); text-align:center; font-size:1vw;transition:all 1s linear;}
#ar4{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transform: rotateY(180deg); border:0.2vh solid black; background:url('http://ekladata.com/rYREPI4ylvBI83C6M4QJMQbqV7U.jpg'); background-size:cover; transition:all 1s linear;}#zone5{position:absolute; z-index:1; transform: preserve-3d perspective: 1000; width:16vw; height:9vw; transform:translate(22vw,12.5vw);}
#av5{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; background: linear-gradient(to bottom, rgba(150,200,0,0.8) 0%, rgba(200,150,0,0.2) 100%); text-align:center; font-size:1vw;transition:all 1s linear;}
#ar5{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transform: rotateY(180deg); border:0.2vh solid black; background:url('http://ekladata.com/zcyDmd5f78ukKMonH48_mKWd5Is.jpg'); background-size:cover; transition:all 1s linear;}#zone6{position:absolute; z-index:1; transform: preserve-3d perspective: 1000; width:16vw; height:9vw; transform:translate(41vw,12.5vw);}
#av6{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; background: linear-gradient(to bottom, rgba(150,200,0,0.8) 0%, rgba(200,150,0,0.2) 100%); text-align:center; font-size:1vw;transition:all 1s linear;}
#ar6{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transform: rotateY(180deg); border:0.2vh solid black; background:url('http://ekladata.com/Gdd5EBlpaVLQucl1B2thtv1vlC0.jpg'); background-size:cover; transition:all 1s linear;}#zone7{position:absolute; z-index:1; transform: preserve-3d perspective: 1000; width:16vw; height:9vw; transform:translate(3vw,23.25vw);}
#av7{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; background: linear-gradient(to bottom, rgba(150,200,0,0.8) 0%, rgba(200,150,0,0.2) 100%); text-align:center; font-size:1vw;transition:all 1s linear;}
#ar7{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transform: rotateY(180deg); border:0.2vh solid black; background:url('http://ekladata.com/O7D7wSUFA7fxpTJUedDkwax5AvA.jpg'); background-size:cover; transition:all 1s linear;}#zone8{position:absolute; z-index:1; transform: preserve-3d perspective: 1000; width:16vw; height:9vw; transform:translate(22vw,23.25vw);}
#av8{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; background: linear-gradient(to bottom, rgba(150,200,0,0.8) 0%, rgba(200,150,0,0.2) 100%); text-align:center; font-size:1vw;transition:all 1s linear;}
#ar8{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transform: rotateY(180deg); border:0.2vh solid black; background:url('http://ekladata.com/Ult3MAXaYGX3G1sVRvY6vFc35tU.jpg'); background-size:cover; transition:all 1s linear;}#zone9{position:absolute; z-index:1; transform: preserve-3d perspective: 1000; width:16vw; height:9vw; transform:translate(41vw,23.25vw);}
#av9{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; background: linear-gradient(to bottom, rgba(150,200,0,0.8) 0%, rgba(200,150,0,0.2) 100%); text-align:center; font-size:1vw;transition:all 1s linear;}
#ar9{position:absolute; backface-visibility: hidden; width:16vw; height:9vw; transform:translate(0vw,0vw);border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transform: rotateY(180deg); border:0.2vh solid black; background:url('http://ekladata.com/gmIqOhp9FqPfPYh_kakedgvPA7o.jpg'); background-size:cover; transition:all 1s linear;}
#zone1:hover,#zone2:hover,#zone3:hover,#zone4:hover,#zone5:hover, #zone6:hover,#zone7:hover,#zone8:hover,#zone9:hover{z-index:10;}
#zone1:hover #av1,#zone2:hover #av2,#zone3:hover #av3,#zone4:hover #av4,#zone5:hover #av5,#zone6:hover #av6,#zone7:hover #av7,#zone8:hover #av8,#zone9:hover #av9{transform: rotateY(-180deg);}
#zone1:hover #ar1,#zone2:hover #ar2,#zone3:hover #ar3,#zone4:hover #ar4,#zone5:hover #ar5,#zone6:hover #ar6,#zone7:hover #ar7,#zone8:hover #ar8,#zone9:hover #ar9{transform: rotateY(0deg);}
#zone1:active #ar1{width:60vw; height:33.75vw; transform:translate(-3vw,-1.7vw);}
#zone2:active #ar2{width:60vw; height:33.75vw; transform:translate(-22vw,-1.7vw);}
#zone3:active #ar3{width:60vw; height:33.75vw; transform:translate(-41vw,-1.7vw);}
#zone4:active #ar4{width:60vw; height:33.75vw; transform:translate(-3vw,-12.5vw);}
#zone5:active #ar5{width:60vw; height:33.75vw; transform:translate(-22vw,-12.5vw);}
#zone6:active #ar6{width:60vw; height:33.75vw; transform:translate(-41vw,-12.57vw);}
#zone7:active #ar7{width:60vw; height:33.75vw; transform:translate(-3vw,-23.25vw);}
#zone8:active #ar8{width:60vw; height:33.75vw; transform:translate(-22vw,-23.25vw);}
#zone9:active #ar9{width:60vw; height:33.75vw; transform:translate(-41vw,-23.25vw);}
--></style>
montages par codes HTML/CSS
Créer mon blog