cath

Pour essayer de comprendre ce qui ne va pas chez cette blogueuse qui reprend deux de mes codes dans un article.
Cet article est le sien !

Sur le montage ci-dessous, vous trouverez les fleurs en fin de vie, le 27 février dernier,

soit trois jours après les photos ci-dessus... Vous constaterez qu'en quelques jours,

que de changements sur cette floraison !

A présent, les fleurs ont disparu et seul le joli feuillage très fin typique des acacias

tiendra lieu élégamment de parure à notre bel arbuste !

<p style="text-align: center;"><span style="text-decoration: underline;"><span style="font-size: 14pt;"><strong>Pour essayer de comprendre ce qui ne va pas chez cette blogueuse qui reprend deux de mes codes dans un article.</strong></span></span></p>
<div style="width: 80vw; height: 86vh; margin: 0px auto; overflow: hidden;"><input id="b1" type="text" />
<p id="m0">Cliquez sur ces lignes pour d&eacute;placer les vignettes.<br />Puis survolez chaque vignette pour l'agrandir.<br />Retour par un clic hors montage.</p>
<p id="m1"><img id="z1" class="ph" src="https://ekladata.com/qdt4IZViZstB3HOiAxMBfBjvVNk/Lilas2-en-fleur-6218.jpg" alt="" /> <img id="z2" class="ph" src="https://ekladata.com/qbzx75JQNHlEZhkoOF7qeBSr2j8/Lilas2-en-fleur-6225.jpg" alt="" /> <img id="z3" class="ph" src="https://ekladata.com/VapGXUAVNilWF6-YPs512T40C-g/Lilas2-en-fleur-6233.jpg" alt="" /> <img id="z4" class="ph" src="https://ekladata.com/cK3e6a_x7DWRf6XtVaVnAOyna3Q/Lilas2-en-fleur-6238.jpg" alt="" /> <img id="z5" class="ph" src="https://ekladata.com/gFPM6VJ0mpPPflyEcUANGQv0ITA/Lilas2-en-fleur-6240.jpg" alt="" /> <img id="z6" class="ph" src="https://ekladata.com/gWNsuu0keNEUkZo6LJaXOaBJpak/Lilas2-en-fleur-6253.jpg" alt="" /> <img id="z7" class="ph" src="https://ekladata.com/OUjioXdfdEx7DzvxPTqcpmkjmnI/Lilas2-en-fleur-6254.jpg" alt="" /> <img id="z8" class="ph" src="https://ekladata.com/H6zVyM0E67oPQoIOygJVpvJJzTQ/Lilas2-en-fleur-6261.jpg" alt="" /> <img id="z9" class="ph" src="https://ekladata.com/VfgF4ZpXdk-QlisMDcMhVw8ciJo/Lilas2-en-fleur-6264.jpg" alt="" /> <img id="z10" class="ph" src="https://ekladata.com/Nh8P1iC00s7-iAw0DKXu53H8lio/Lilas2-en-fleur-6268.jpg" alt="" /> <img id="z11" class="ph" src="https://ekladata.com/ICjmExDKwUVSJ0LgEqk660zxlU0/Lilas2-en-fleur-6270.jpg" alt="" /></p>
</div>
<style><!--
#b1{position:absolute; z-index:25; width:60vw; height:15vh; background:transparent; border:none; transform:translate(20%,0%);}
#m0{position:absolute;z-index:1; width:60vw; height:15vh; text-align:center; font-size:3.5vh; text-shadow:1px 1px black; color:yellow; transform:translate(20%,0%);}
#m1{z-index:10; width:80vw; height:86vh; background:transparent; transform:translate(-80vw,0vh); transition:all 1s linear 0.2s;}
.ph{position:absolute; width: 10vw; height: 20vh; border-radius:50%; border:0.2vw solid white; box-shadow: 0.2vw 0.2vh 0.5vw black; transition:all 1s linear;}
#z1{margin:20vh 0 0 10vw;}
#z2{margin:20vh 0 0 25vw;}
#z3{margin:20vh 0 0 40vw;}
#z4{margin:20vh 0 0 55vw;}
#z5{margin:40vh 0 0 17vw;}
#z6{margin:40vh 0 0 32vw;}
#z7{margin:40vh 0 0 47vw;}
#z8{margin:60vh 0 0 10vw;}
#z9{margin:60vh 0 0 25vw;}
#z10{margin:60vh 0 0 40vw;}
#z11{margin:60vh 0 0 55vw;}

#b1:focus{width:0px;height:0px;}
#b1:focus ~ #m1{transform:translate(0vw,0vh); }
#z1:hover{ z-index:15; border-radius:0%; width:80vw; height:86vh; transform:translate(-10vw,-20vh); }
#z2:hover{ z-index:15; border-radius:0%; width:80vw; height:86vh; transform:translate(-25vw,-20vh); }
#z3:hover{ z-index:15; border-radius:0%; width:80vw; height:86vh; transform:translate(-40vw,-20vh); }
#z4:hover{ z-index:15; border-radius:0%; width:80vw; height:86vh; transform:translate(-55vw,-20vh); }
#z5:hover{ z-index:15; border-radius:0%; width:80vw; height:86vh; transform:translate(-17vw,-40vh); }
#z6:hover{ z-index:15; border-radius:0%; width:80vw; height:86vh; transform:translate(-32vw,-40vh); }
#z7:hover{ z-index:15; border-radius:0%; width:80vw; height:86vh; transform:translate(-47vw,-40vh); }
#z8:hover{ z-index:15; border-radius:0%; width:80vw; height:86vh; transform:translate(-10vw,-60vh); }
#z9:hover{ z-index:15; border-radius:0%; width:80vw; height:86vh; transform:translate(-25vw,-60vh); }
#z10:hover{ z-index:15; border-radius:0%; width:80vw; height:86vh; transform:translate(-40vw,-60vh); }
#z11:hover{ z-index:15; border-radius:0%; width:80vw; height:86vh; transform:translate(-55vw,-60vh); }
--></style>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p style="text-align: center;"><strong>Sur le montage ci-dessous, vous trouverez les fleurs en fin de vie, le 27 f&eacute;vrier dernier,</strong></p>
<p style="text-align: center;"><strong>soit trois jours apr&egrave;s les photos ci-dessus... Vous constaterez qu'en quelques jours,</strong></p>
<p style="text-align: center;"><strong>que de changements sur cette floraison !</strong></p>
<p style="text-align: center;"><strong>A pr&eacute;sent, les fleurs ont disparu et seul le joli feuillage tr&egrave;s fin typique des acacias</strong></p>
<p style="text-align: center;"><strong>tiendra lieu &eacute;l&eacute;gamment de parure &agrave; notre bel arbuste !</strong></p>
<p>&nbsp;</p>
<div style="width: 80%; height: 86vh; border: 1px solid black; margin: 0px auto;"><input id="a1" type="text" />
<p id="x0">Cliquez sur le montage pour d&eacute;placer les vignettes.<br />Puis survolez chaque vignette pour l'agrandir.<br />Retour par un clic.</p>
<p id="x1">&nbsp;</p>
<p id="x2">&nbsp;</p>
<p id="x3">&nbsp;</p>
<p id="x4">&nbsp;</p>
<p id="x5">&nbsp;</p>
<p id="x6">&nbsp;</p>
<p id="x7">&nbsp;</p>
</div>

<style><!--
#a1{position:absolute; z-index:10; width:80vw; height:86vh; background:transparent; border:none;}
#x0{position:absolute;z-index:1; width:60vw; text-align:center; font-size:3.5vh; text-shadow:1px 1px black; color:yellow; transform:translate(20%,0%);}
#x1{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(5vw,35vh) rotate(-15deg); background:url('https://ekladata.com/mLBIfn25mrnHRK21u6iPLMFMzFI/Mimosa-3-fleurs-6290.jpg'); background-size:cover; transition:all 1s linear;}
#x2{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(10vw,25vh); background:url('https://ekladata.com/yQ6aF8SEO7KnHQOkSCCwv8tcl8o/Mimosa-3-fleurs-6291.jpg'); background-size:cover; transition:all 1s linear;}
#x3{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(25vw,35vh)rotate(20deg); background:url('https://ekladata.com/WaE0ZSpEwc7Wq40LW09PkGRNrbY/Mimosa-3-fleurs-6292.jpg'); background-size:cover; transition:all 1s linear;}
#x4{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(10vw,55vh) rotate(-10deg); background:url('https://ekladata.com/SSrNLIrutLWMn5js9Wy_TJZLALY/Mimosa-3-fleurs-6293.jpg'); background-size:cover; transition:all 1s linear;}
#x5{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(35vw,25vh) rotate(5deg) ; background:url('https://ekladata.com/jqAdXB1Q56f4VAZ1FY5uvbhJbSo/Mimosa-3-fleurs-6294.jpg'); background-size:cover; transition:all 1s linear;}
#x6{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(45vw,40vh) rotate(10deg); background:url('https://ekladata.com/jzvfvrzcETyDarBvwJthNlMWExw/Mimosa-3-fleurs-6295.jpg'); background-size:cover; transition:all 1s linear;}
#x7{position:absolute; z-index:5; width:15vw; height:20vh; border-radius:3vw; border:0.2vw ridge white; box-shadow:0.2vw 0.2vw 0.3vw black, inset 0.3vw 0.3vh 0.4vw white, inset -0.2vw -0.2vh 0.4vw black; transform:translate(55vw,55vh)rotate(-20deg) ; background:url('https://ekladata.com/oQXeOP1K8fhYxn3Jw-YiVhwbAzQ/Mimosa-3-fleurs-6296.jpg'); background-size:cover; transition:all 1s linear;}

#a1:focus{width:0px;height:0px;}
#a1:focus ~ #x1{transform:translate(5vw,30vh); }
#a1:focus ~ #x2{transform:translate(22vw,30vh);}
#a1:focus ~ #x3{transform:translate(42vw,30vh);}
#a1:focus ~ #x4{transform:translate(60vw,30vh);}
#a1:focus ~ #x5{transform:translate(10vw,55vh);}
#a1:focus ~ #x6{transform:translate(30vw,55vh);}
#a1:focus ~ #x7{transform:translate(50vw,55vh);}

#x1:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px; margin:-30vh 0 0 -5vw;}
#x2:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-30vh 0 0 -22vw;}
#x3:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px; margin:-30vh 0 0 -42vw;}
#x4:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-30vh 0 0 -60vw;}
#x5:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-55vh 0 0 -10vw;}
#x6:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px; margin:-55vh 0 0 -30vw;}
#x7:hover{z-index:10; width:79vw; height:86vh; border:none; box-shadow:0px 0px 0px; border-radius:0px;margin:-55vh 0 0 -50vw;}
--></style>