Perspective

Je ne sais faire des diaporamas automatiques, en CSS sans javascript , qu'en translation (slide) ou en changement d'image de fond.

Alors voici toujours le même principe d'affichage au survol, sur des images déjà proposées: 1 + 5 au ratio 16/9.

 

<div style="width: 1000px; height: 563px; margin: 30px auto; border: 3px solid white; text-align: left; background: url('http://ekladata.com/9WKdH7tN-5l8UDdLOZ9Fe88Ecic.jpg'); background-size: cover;">
<p id="fd">&nbsp;</p>
<img id="frd1" class="frd" src="http://ekladata.com/iVl5f76Kmhmcf0PsR8BYc3-FUhU.jpg" alt="" />
<img id="frd2" class="frd" src="http://ekladata.com/V2WcFQ_uFtzIg6hHfVzQeGk-MWg.jpg" alt="" />
<img id="frd3" class="frd" src="http://ekladata.com/qd3jHegZms0D_O-WWiF-clyPgTM.jpg" alt="" />
<img id="frd4" class="frd" src="http://ekladata.com/xuDQjEQ1R3ma7E2M-pfqDWQL3cc.jpg" alt="" />
<img id="frd5" class="frd" src="http://ekladata.com/4o5mmLj0MCSBkriGKeawlPyXT8A.jpg" alt="" />
</div>
<style><!--
#fd{position:absolute; z-index:1; width:160px; height:563px; background:rgba(0,0,0,0.3); transform:translate(0px,0px);}
.frd{position:absolute; z-index:1; width:240px; height:135px; border:3px solid white;  transform-origin:center left; transition:all 2s;}
#frd1{box-sizing:border-box; transform:translate(10px,20px) perspective(200px) rotatey(60deg);}
#frd2{box-sizing:border-box; transform:translate(80px,120px) perspective(200px) rotatey(60deg);}
#frd3{box-sizing:border-box; transform:translate(10px,240px) perspective(200px) rotatey(60deg);}
#frd4{box-sizing:border-box; transform:translate(80px,340px) perspective(200px) rotatey(60deg);}
#frd5{box-sizing:border-box; transform:translate(10px,420px) perspective(200px) rotatey(60deg);}
#frd1:hover,#frd2:hover,#frd3:hover,#frd4:hover,#frd5:hover{z-index:5; width:1000px; height:563px; transform:translate(0px,0px) perspective(2000px) rotatey(0deg);}
--></style>