Diapo varié

J'ai décidemment du mal à comprendre le fonctionnement de l'éditeur html/css de blogger: les images horizontales sont agrandies en 1200px, bordure comprise et le cadre fait 1200px de largeur intérieure et il y a un espace entre les deux !

Pour que largeur et hauteur soient prises en compte, il faut ajouter !important aux dimensions !

Au lieu de placer les images directement dans le cadre, je viens de les placer en fond de paragraphes; il faut, comme souvent, paramétrer le margin-top:-15px mais là, les images agrandies sont bien positionnées.

Sur Ekla, le montage avec les adresses des images, fonctionne très bien !

Le code: 

<div style="border: 6px ridge grey; height: 675px; margin: 50px auto; text-align: left; width: 1200px;">

<p class="vanc" id="vanc1">&nbsp;</p> 

<p class="vanc" id="vanc2">&nbsp;</p>

<p class="vanc" id="vanc3">&nbsp;</p>

<p class="vanc" id="vanc4">&nbsp;</p>

<p class="hanc" id="hanc1">&nbsp;</p>

<p class="vanc" id="vanc5">&nbsp;</p>

<p class="hanc" id="hanc2">&nbsp;</p>

<p class="hanc" id="hanc3">&nbsp;</p>

<p class="hanc" id="hanc4">&nbsp;</p>

<p id="gf">SURVOL</p>

</div>

<style><!--

.vanc{position:absolute; width:135px; height:240px; margin-top:0px; border:4px solid white; transition:all 1s;}

#vanc1{box-sizing:border-box; background:url('http://ekladata.com/wMYu1RtSIqcYlwOtyjQT6xWAgGA.jpg'); background-size:cover; transform:translate(50px,30px);}

#vanc2{box-sizing:border-box; background:url('http://ekladata.com/eWGJsMm_ughcTaSkz3TqiK_XC24.jpg'); background-size:cover; transform:translate(100px,220px);}

#vanc3{box-sizing:border-box; background:url('http://ekladata.com/DepI-OhkprhuOXdqntU8Skaotmo.jpg'); background-size:cover; transform:translate(150px,410px);}

#vanc4{box-sizing:border-box; background:url('http://ekladata.com/-T3elioJGOdXwtZqkEu_QxgQECA.jpg'); background-size:cover; transform:translate(430px,30px);}

#vanc5{box-sizing:border-box; background:url('http://ekladata.com/dO85BXSEF70KKeR6dwOjT6kDffQ.jpg'); background-size:cover; transform:translate(600px,370px);}

.hanc{position:absolute; width:240px; height:135px; margin-top:0px; border:4px solid white; transition:all 1s;}

#hanc1{box-sizing:border-box; background:url('http://ekladata.com/24HPI8eFY7-bIlq28w3d7XD1i30.jpg'); background-size:cover; transform:translate(460px,250px);}

#hanc2{box-sizing:border-box; background:url('http://ekladata.com/LpoQfwFI7oJRqb2lS69ddz-dhjg.jpg'); background-size:cover; transform:translate(930px,50px);}

#hanc3{box-sizing:border-box; background:url('http://ekladata.com/oDpUCih-qRC7haIdfAfgErD5B48.jpg'); background-size:cover; transform:translate(870px,250px);}

#hanc4{box-sizing:border-box; background:url('http://ekladata.com/qsRTJSCyJCEDJJfZJq2Ozibj9hw.jpg'); background-size:cover; transform:translate(820px,450px);}

 #gf{position:absolute; width:135px; font-size:25px; transform:translate(250px,40px);} 

#vanc1:hover,#vanc2:hover, #vanc3:hover{z-index:5; width:380px; height:675px; transform:translate(0px,0px);}

#vanc4:hover,#vanc5:hover{z-index:5; width:380px; height:675px; transform:translate(410px,0px);}

#hanc1:hover,#hanc2:hover,#hanc3:hover,#hanc4:hover{z-index:5; width:1200px; height:675px; transform:translate(0px,0px);}

--></style>

 

 

 

 

 

 

 

 

 

SURVOL