Essai

En plus de mes erreurs d'écriture, il faut s'adapter à l'éditeur blogger !
Mais, les adresses images Ekla fonctionnent et le positionnement est bon, avec mon réglage paramètre style haut/gauche.

S U R V O L

 

 

 

 

 

 

---

<p style="text-align: center;"><span style="font-size: medium; text-shadow:1px 1px black;"><b>En plus de mes erreurs d'écriture, il faut s'adapter à l'éditeur blogger !<br />Mais, les adresses images Ekla fonctionnent et le positionnement est bon, avec mon réglage paramètre style haut/gauche.</b></span></p>

<div id="mtg0">

<p id="sv" style="text-align: center;"><span style="font-size: grande;text-shadow:1px 1px black;"><b>S  U  R  V  O  L</b></span></p>

<p class="rep" id="rep1">&nbsp;</p>

<p class="rep" id="rep2">&nbsp;</p>

<p class="rep" id="rep3">&nbsp;</p>

<p class="rep" id="rep4">&nbsp;</p>

<p class="rep" id="rep5">&nbsp;</p>

<p class="rep" id="rep6">&nbsp;</p>

</div>

<style><!--

#sv{position:absolute; width:50px; height:675px; text-align:center; line-height:80px; font-size:50px; transform:translate(575px,0px);}

#mtg0{position:relative; width:1200px; height:675px;}

.rep{position:absolute; z-index:1; width:150px; height:675px; margin-top:0px; border:4px solid white;  filter:grayscale(1); transition:all 1s 0s, filter 1s 1s;}

#rep1{box-sizing:border-box; background:url('http://ekladata.com/L8p3nwekiTd6qzKI4feyc-of8Co.jpg');background-size:1200px 675px; background-position:0px 0px; transform:translate(0px,0px);}

#rep2{box-sizing:border-box; background:url('http://ekladata.com/gwz7osnKzAo0ff9eSkyVXE_4lVA.jpg');background-size:1200px 675px; background-position:-200px 0px; transform:translate(200px,0px);}

#rep3{box-sizing:border-box; background:url('http://ekladata.com/sRyP-ek3_aG46PxhTd1LrbPot9E.jpg');background-size:1200px 675px; background-position:-400px 0px; transform:translate(400px,0px);}

#rep4{box-sizing:border-box; background:url('http://ekladata.com/09imf3i-Wz4orqylj-l5AbVB0JU.jpg');background-size:1200px 675px; background-position:-600px 0px; transform:translate(650px,0px);}

#rep5{box-sizing:border-box; background:url('http://ekladata.com/AsWs1cosuK9oQZwEehsxbBafpXg.jpg');background-size:1200px 675px; background-position:-800px 0px; transform:translate(850px,0px);}

#rep6{box-sizing:border-box; background:url('http://ekladata.com/FB7uoac_Uyc0euDFzH8oP8WJCaI.jpg');background-size:1200px 675px; background-position:-1000px 0px; transform:translate(1050px,0px);}

#rep1:hover,#rep2:hover,#rep3:hover,#rep4:hover,#rep5:hover,#rep6:hover{z-index:5; width:1200px; filter:grayscale(0); background-position:0px 0px; transform:translate(0px,0px);}

--></style>