Diaporama 27 horizontal

Le montage Diapo 27 peut être modifié facilement pour une animation dans le sens vertical.

<div id="fond">
<p id="bg1">&nbsp;</p>
<p id="bg2">&nbsp;</p>
<p id="bg3">&nbsp;</p>
<p id="bg4">&nbsp;</p>
<p id="mg1">&nbsp;</p>
<p id="mg2">&nbsp;</p>
<p id="mg3">&nbsp;</p>
<p id="mg4">&nbsp;</p>
</div>
<style type="text/css"><!--
#fond{position:relative; margin:10px auto; width:800px; height:615px; border:1px solid black; background:url('http://ekladata.com/SrXheMfSMYh3RAirWZeygeoGYhc/satin6.jpg'); background-size:cover;}
#bg1{position:absolute; z-index:5; transform:translate(750px,60px); width:20px; height:40px; border:1px solid white; box-shadow:2px 2px black,inset 1px 1px 2px white, inset -1px -1px 2px black; border-radius:5px; background-color:lime;}
#bg2{position:absolute; z-index:5; transform:translate(750px,205px); width:20px; height:40px; border:1px solid white; box-shadow:2px 2px black,inset 1px 1px 2px white, inset -1px -1px 2px black; border-radius:5px; background-color:lime;}
#bg3{position:absolute; z-index:5; transform:translate(750px,355px); width:20px; height:40px; border:1px solid white; box-shadow:2px 2px black,inset 1px 1px 2px white, inset -1px -1px 2px black; border-radius:5px; background-color:lime;}
#bg4{position:absolute; z-index:5; transform:translate(750px,500px); width:20px; height:40px; border:1px solid white; box-shadow:2px 2px black,inset 1px 1px 2px white, inset -1px -1px 2px black; border-radius:5px; background-color:lime;}
#mg1{position:relative; transition:all 1s linear; transform:translate(0px,0px); width:796px; height:146px; border:2px solid white; background:url('http://ekladata.com/QoRn6SQVYEcxfnmHooTiealrLM8/DSCN6270f.jpg');}
#mg2{position:relative; transition:all 1s linear; transform:translate(0px,-10px); width:796px; height:146px; border:2px solid white; background:url('http://ekladata.com/rvd3f19tkwiN13tYP88J8EYsjGw/DSCN6266.jpg');}
#mg3{position:relative; transition:all 1s linear; transform:translate(0px,-20px); width:796px; height:146px; border:2px solid white; background:url('http://ekladata.com/vo73uZUj4BHXf9m1JKxBC59b2pw/DSCN6268.jpg');}
#mg4{position:relative; transition:all 1s linear; transform:translate(0px,-30px); width:796px; height:146px; border:2px solid white; background:url('http://ekladata.com/5I36WlrheSsc3ixkvcJbumVkGt8/DSCN6267.jpg');}

#bg1:hover ~ #mg1{width:800px; height:600px; border:0px;}
#bg1:hover ~ #mg2,#bg1:hover ~ #mg3,#bg1:hover ~ #mg4{height:5px; border:0px;}
#bg2:hover ~ #mg2{width:800px; height:600px; border:0px;}
#bg2:hover ~ #mg1,#bg2:hover ~ #mg3,#bg2:hover ~ #mg4{height:5px; border:0px;}
#bg3:hover ~ #mg3{width:800px; height:600px; border:0px;}
#bg3:hover ~ #mg1, #bg3:hover ~ #mg2, #bg3:hover ~ #mg4{height:5px; border:0px;}
#bg4:hover ~ #mg4{width:800px; height:600px; border:0px;}
#bg4:hover ~ #mg1, #bg4:hover ~ #mg2,#bg4:hover ~ #mg3{height:5px; border:0px;}
--></style>

Les images conservent leur largeur de 800px mais leur hauteur est réduite à 150px, moins les bordures de 2px, soit 146px.
Elles sont positionnées les unes sous les autres (position par défaut) et les boutons sont positionnées en fonction.
Si vous voulez placer vos adresses d'images à la place des miennes: elle sont surlignées en bleu clair.