Diapo vertical 450x600px

Code.

<div style="width: 450px; height: 600px; margin: 0 0 50px 0; border: 1px solid black; position: absolute; transform: translate(150px,50px); overflow: hidden;">
<p id="bt2">A</p>
<p id="bt3">B</p>
<p id="bt4">C</p>
<p id="bt5">D</p>
<p id="bt6">E</p>
<p id="p1">&nbsp;</p>
<p id="p2">&nbsp;</p>
<p id="p3">&nbsp;</p>
<p id="p4">&nbsp;</p>
<p id="p5">&nbsp;</p>
<p id="p6">&nbsp;</p>
</div>
</div>

<style><!--
#bt2{position:absolute; z-index:10; transform:translate(400px,0px); font-size:20pt; text-align:center; width:30px; height:30px; border-radius:50%; background-color:yellow; border:1px solid black; box-shadow:1px 1px black;}
#bt3{position:absolute; z-index:10; transform:translate(400px,50px); font-size:20pt; text-align:center; width:30px; height:30px; border-radius:50%; background-color:yellow; border:1px solid black; box-shadow:1px 1px black;}
#bt4{position:absolute; z-index:10; transform:translate(400px,100px); font-size:20pt; text-align:center; width:30px; height:30px; border-radius:50%; background-color:yellow; border:1px solid black; box-shadow:1px 1px black;}
#bt5{position:absolute; z-index:10; transform:translate(400px,150px); font-size:20pt; text-align:center; width:30px; height:30px; border-radius:50%; background-color:yellow; border:1px solid black; box-shadow:1px 1px black;}
#bt6{position:absolute; z-index:10; transform:translate(400px,200px); font-size:20pt; text-align:center; width:30px; height:30px; border-radius:50%; background-color:yellow; border:1px solid black; box-shadow:1px 1px black;}
#p1{position:absolute; z-index:1; transition:all 1s linear; transform:translate(0px,0px); width:450px; height:600px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/06/DSCN5724.JPG');}
#p2{position:absolute; z-index:2; transition:all 1s linear; transform:translate(-550px,-80px) rotate(90deg) ; width:450px; height:600px;background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/06/DSCN5750.JPG');}
#p3{position:absolute; z-index:2; transition:all 1s linear; transform:translate(-550px,-80px) rotate(90deg) ; width:450px; height:600px;background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/06/DSCN5753.JPG');}
#p4{position:absolute; z-index:2; transition:all 1s linear; transform:translate(-550px,-80px) rotate(90deg) ; width:450px; height:600px;background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/06/DSCN5757.JPG');}
#p5{position:absolute; z-index:2; transition:all 1s linear; transform:translate(-550px,-80px) rotate(90deg) ; width:450px; height:600px;background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/06/DSCN5790.JPG');}
#p6{position:absolute; z-index:2; transition:all 1s linear; transform:translate(-550px,-80px) rotate(90deg) ; width:450px; height:600px;background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/06/DSCN5791.JPG');}
#bt2:hover ~ #p2{transform:translate(0px,0px) rotate(0deg);}
#bt3:hover ~ #p3{transform:translate(0px,0px) rotate(0deg);}
#bt4:hover ~ #p4{transform:translate(0px,0px) rotate(0deg);}
#bt5:hover ~ #p5{transform:translate(0px,0px) rotate(0deg);}
#bt6:hover ~ #p6{transform:translate(0px,0px) rotate(0deg);}
--></style>
...