kep1+4képpel és a koddal

Kép  a képekkel

Saját képeid legyenek 6 drb egyforma méretben pl: 500X400  /itt a kódban 400X300px nagyságuak a képek.

Tedd fel a képeidet az Ekla-oldaladra és ott kimásolod a képek url képcimét Copy és ide a kodban ahol piros oda másolod be.

Majd  végül is a kész kodot bemásolod az Ekla oldalad Forrás-kodjába <> itt :

Ha a képeket nagyobbra szeretnéd akkor ird át a 60% 80 ra ha kisebbre szeretnéd akkor ird át a 60% 30-ra ott ahol zöld   

Az eredeti HTML codot itt találod meg:  http://pourquoipas732.eklablog.com/page-d-essai-p1199278

<p>
<div id="r1">
<p id="f3"><img id="r2" src="http://ekladata.com/IrgWOAvinM5QUK9vlE8glFtyUWg/kep400x300ez009.jpg"
alt="" /><img id="r3" class="vg" src="http://ekladata.com/4cFLIiqVO6calHNwdWdNjksvRCY/kep400x300ez002.jpg"
alt="" /><img id="r4" class="vg" src="http://ekladata.com/DNKD2d4CxFYVtfyGqL0q22QOWMw/kep400x300ez003.jpg"
alt="" /><img id="r5" class="vg" src="http://ekladata.com/nN-gV9E6wOWiXjPwhoc9ZSbHPk4/kep400x300ez005.jpg"
alt="" /><img id="r6" class="vg" src="http://ekladata.com/ySmBTraI3Ozx7SGcIycdD5jdd6o/kep400x300ez007.jpg"
alt="" /><img id="r7" class="vg" src="http://ekladata.com/u0fHnppbBC1CjZdCY0V-7voFqe0/kep400x300ez0010.jpg" alt="" /></p>
</div></p>

<p>
<style><!--
#r1{margin:2% 2% 45% 0%;}
#f3{position:relative; z-index:5; width:60%;}
#r2{ position:absolute; z-index:1; width:100%; border:6px solid white; }
.vg{position:absolute; width:12%; background-size:cover; border:2px solid white; transition:all 1s linear;}
#r3{z-index:2;margin:2% 0% 0% 85%;}
#r4{z-index:2;margin:12% 0% 0% 85%;}
#r5{z-index:2;margin:22% 0% 0% 85%;}
#r6{z-index:2;margin:32% 0% 0% 85%;}
#r7{z-index:2;margin:42% 0% 0% 85%;}
#r3:hover, #r4:hover, #r5:hover, #r6:hover, #r7:hover{width:100%; margin:0% 0% 0% 0%; z-index:10;border:6px solid white; }
--></style></p>

AZ EREDMENY :