Art.04.9.21

 7 images au ratio 16/9; animation au survol.

 

 

 

 

 

 

<div style="width: 1000px; height: 600px; border: 6px ridge white; box-shadow: 4px 4px 6px black; margin: 20px auto; text-align: left; background: beige;"><input id="mq0" type="text" value="Survol boutons" /> <input id="mq1" class="mq" type="text" /> <input id="mq2" class="mq" type="text" /> <input id="mq3" class="mq" type="text" /> <input id="mq4" class="mq" type="text" /> <input id="mq5" class="mq" type="text" /> <input id="mq6" class="mq" type="text" /> <img id="df0" src="http://ekladata.com/mO59IMW5SYmo7d8hCu0t45hJ36M@1000x562.jpg" alt="" />
<p id="def1" class="def">&nbsp;</p>
<p id="def2" class="def">&nbsp;</p>
<p id="def3" class="def">&nbsp;</p>
<p id="def4" class="def">&nbsp;</p>
<p id="def5" class="def">&nbsp;</p>
<p id="def6" class="def">&nbsp;</p>
</div>
<style><!--
#mq0{position:absolute; z-index:1; width:200px; font-size:25px; background:none; transform:translate(0px,0px);}
.mq{position:absolute; z-index:1; width:50px; height:34px; background:coral; box-shadow:inset -3px -3px 4px black, inset 3px 3px 4px white; border-radius:5px 5px 0 0;}
#mq1{transform:translate(300px,2px);}
#mq2{transform:translate(400px,2px);}
#mq3{transform:translate(500px,2px);}
#mq4{transform:translate(600px,2px);}
#mq5{transform:translate(700px,2px);}
#mq6{transform:translate(800px,2px);}
.mq:hover{background:lime;}
#df0{position:absolute; z-index:1; width:1000px; height:562px; transform:translate(0px,38px);}
.def{position:absolute; z-index:1; width:0px; height:0px; filter:grayscale(1); transform:translate(500px,319px); transition:all 1s 0s, filter 1s 1s; }
#def1{background:url('http://ekladata.com/j2a6rBlyeix-AuXz-LbA6ZW9mSU@1000x562.jpg'); background-position:-500px -281px;}
#def2{background:url('http://ekladata.com/QC1FJMNRU0RJS0K8ycjlogBMlxs@1000x562.jpg'); background-position:-500px -281px;}
#def3{background:url('http://ekladata.com/d_8cqEJH4wMmgVrZ6QTDRJX9MvE@1000x562.jpg'); background-position:-500px -281px;}
#def4{background:url('http://ekladata.com/KfdY4ZbbfjUi_hlBWDOuNDbUAjs@1000x562.jpg'); background-position:-500px -281px;}
#def5{background:url('http://ekladata.com/qqQaorc9JbP9y87_3M-nMcI0-rI@1000x562.jpg'); background-position:-500px -281px;}
#def6{background:url('http://ekladata.com/MyhhifF-EsXa67zjVUF8qhDHNEs@1000x562.jpg'); background-position:-500px -281px;}
#mq1:hover ~ #def1,#mq2:hover ~ #def2,#mq3:hover ~ #def3,#mq4:hover ~ #def4,#mq5:hover ~ #def5,#mq6:hover ~ #def6{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,38px); filter:grayscale(0);}
--></style>