Diapo PE1

Pour essayer de maîtriser mon sujet, il me faut encore quelques essais ! Je ressors mes photos de St Pantaléon.

Essai en position absolute, left:-0.5vw; et top:26.5vw. Ne vous étonnez pas du text-align:left qui annule le text-align:center de mes pages.

En positionnant en left:0;, la bordure gauche est visible et avec -0.5vw, c'est mieux centré.

En positionnant en top:0;, le montage se place sur le bandeau et les onglets, ne permettant plus de facilement le modifier.

Mon bandeau et ces lignes de texte amènent à placer le montage à top:26.5vw;

Essayons avec ces valeurs que vous aurez à adapter sur votre blog !  Le clic est plus adapté que le survol afin de pouvoir déplacer le montage verticalement.

Il est également préférable de sortir d'un clic par un autre clic sur l'image avant de cliquer sur un autre bouton pour que les animation ne se chevauchent pas ... mais "c'est vous qui voyez" !

<div style="position: absolute; z-index: 100; width: 100vw; height: 56.25vw; background: url('http://ekladata.com/ZXr20n-lfucicWeLdCGq0q7dbnk.jpg'); background-size: cover; border: 0.4vh solid black; left: -0.5vw; top: 26.5vw; text-align: left;"><input id="bt1" class="bt" type="text" value="A" /> <input id="bt2" class="bt" type="text" value="B" /> <input id="bt3" class="bt" type="text" value="C" /> <input id="bt4" class="bt" type="text" value="D" /> <input id="bt5" class="bt" type="text" value="E" /> <input id="bt6" class="bt" type="text" value="F" /> <input id="bt7" class="bt" type="text" value="G" /> <input id="bt8" class="bt" type="text" value="H" /> <input id="bt9" class="bt" type="text" value="J" /> <input id="bt10" class="bt" type="text" value="K" /> <img id="stp1" class="stp" src="http://ekladata.com/AfAOIvpZ-NFgKGKfd_4F-xkzndo.jpg" alt="" /> <img id="stp2" class="stp" src="http://ekladata.com/VWeWeruNwpLgoa6xesfY5gnYago.jpg" alt="" /> <img id="stp3" class="stp" src="http://ekladata.com/Xz5mvtBAWJRdQh8TanEJHAFB3Ao.jpg" alt="" /> <img id="stp4" class="stp" src="http://ekladata.com/jAjOWFvbOEmDxid7A42ukBZRrHE.jpg" alt="" /> <img id="stp5" class="stp" src="http://ekladata.com/zebEhEHy9TArQEhKWAS7cDgtCMw.jpg" alt="" /> <img id="stp6" class="stp" src="http://ekladata.com/aFLdeVnwlzssZd7WXi-g9QihIWs.jpg" alt="" /> <img id="stp7" class="stp" src="http://ekladata.com/LCUiqgwaVbxGeDSKctHX6Hn4cg4.jpg" alt="" /> <img id="stp8" class="stp" src="http://ekladata.com/GRSiW9Os8L1jjdcOCOH7DwIvBvk.jpg" alt="" /> <img id="stp9" class="stp" src="http://ekladata.com/Vv2SM0zrecurtnoNmWGCzCTRHmQ.jpg" alt="" /> <img id="stp10" class="stp" src="http://ekladata.com/K48EQ2Wbyg93CA2R7_nis6f9Nqw.jpg" alt="" /></div>

<style><!--
.bt{position:absolute; z-index:110; width:2vw; height:2vw; border-radius:50%; background:rgba(100,0,0,0.5); text-align:center; line-height:2vw; font-size:1.5vw; color:white!important; text-shadow:0.1vh 0.1vh black;}
#bt1{transform:translate(30vw,2vw);}
#bt2{transform:translate(33vw,2vw);}
#bt3{transform:translate(36vw,2vw);}
#bt4{transform:translate(39vw,2vw);}
#bt5{transform:translate(42vw,2vw);}
#bt6{transform:translate(45vw,2vw);}
#bt7{transform:translate(48vw,2vw);}
#bt8{transform:translate(51vw,2vw);}
#bt9{transform:translate(54vw,2vw);}
#bt10{transform:translate(57vw,2vw);}
.stp{position:absolute; z-index:10; transform:translate(0vw,0vw) rotatey(90deg); transition:all 1s linear ;}
#bt1:focus ~ #stp1,#bt2:focus ~ #stp2,#bt3:focus ~ #stp3,#bt4:focus ~ #stp4,#bt5:focus ~ #stp5,#bt6:focus ~ #stp6,#bt7:focus ~ #stp7,#bt8:focus ~ #stp8,#bt9:focus ~ #stp9,#bt10:focus ~ #stp10{z-index:100; transform:translate(0vw,0vw) rotatey(0deg);}
--></style>