Art.01C.7.21

3 images au ratio 16/9.

******************
<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; background: #003333;">
<p id="dbc1">SURVOL</p>
<p id="dbc0">&nbsp;</p>
<p id="dbc2" class="dbc">&nbsp;</p>
<p id="dbc3" class="dbc">&nbsp;</p>
<p id="dbc0a">&nbsp;</p>
<p id="dbc2a" class="dbca">&nbsp;</p>
<p id="dbc3a" class="dbca">&nbsp;</p>
<p id="dbc0b">&nbsp;</p>
<p id="dbc2b" class="dbcb">&nbsp;</p>
<p id="dbc3b" class="dbcb">&nbsp;</p>
</div>
<style><!--
#dbc1{position:absolute; z-index:1; width:120px; font-size:25px; color:white;}
#dbc0{position:absolute; z-index:10; width:400px; height:280px; transform:translate(100px,0px);}
.dbc{position:absolute; z-index:2; border:1px solid white; background:url('http://ekladata.com/pMSm-dRUUCB0eq0Zi7qCx_Z3PJs@1000x562.jpg'); background-size:400px 240px; transition:all 1s;}
#dbc2{box-sizing:border-box; width:400px; height:200px; transform-origin:bottom center; transform:translate(100px,0px) perspective(200px) rotatex(45deg); background-position:0px 0px;}
#dbc3{box-sizing:border-box; width:400px; height:40px; transform-origin:top center; transform:translate(100px,200px) perspective(200px) rotatex(-45deg); background-position:0px -200px;}
#dbc0a{position:absolute; z-index:10; width:400px; height:280px; transform:translate(500px,100px);}
.dbca{position:absolute; z-index:2; border:1px solid white; background:url('http://ekladata.com/5aGjAwQWSdXwsZDRQXdKuPAesaM@1000x562.jpg'); background-size:400px 240px; transition:all 1s;}
#dbc2a{box-sizing:border-box; width:400px; height:200px; transform-origin:bottom center; transform:translate(500px,100px) perspective(200px) rotatex(45deg); background-position:0px 0px;}
#dbc3a{box-sizing:border-box; width:400px; height:40px; transform-origin:top center; transform:translate(500px,300px) perspective(200px) rotatex(-45deg); background-position:0px -200px;}
#dbc0b{position:absolute; z-index:10; width:400px; height:280px; transform:translate(250px,250px);}
.dbcb{position:absolute; z-index:2; border:1px solid white; background:url('http://ekladata.com/CZSHEJUTBt6XtLmKGgXTlTNJOrc@1000x562.jpg'); background-size:400px 240px; transition:all 1s;}
#dbc2b{box-sizing:border-box; width:400px; height:200px; transform-origin:bottom center; transform:translate(250px,250px) perspective(200px) rotatex(45deg); background-position:0px 0px;}
#dbc3b{box-sizing:border-box; width:400px; height:40px; transform-origin:top center; transform:translate(250px,450px) perspective(200px) rotatex(-45deg); background-position:0px -200px;}
#dbc0:hover ~ #dbc2,#dbc0a:hover ~ #dbc2a,#dbc0b:hover ~ #dbc2b{z-index:5; width:1000px; height:562px; transform-origin:top center; transform:translate(0px,0px) perspective(1000px) rotatex(0deg); background-size:1000px 562px;}
--></style>