Art.02.5.21

Un montage simple avec 7 images horizontales au ratio 16/9.

Survol

 

 

 

 

 

 

<div style="width: 1000px; height: 562px; border: 1px solid black; margin: 10px auto; text-align: left; background: url('http://ekladata.com/Dt-MJccX7dYaGWEa0Yk7Rzn7zmk.jpg'); background-size: cover;">
<p id="vb0">Survol</p>
<p id="vb1" class="vb">&nbsp;</p>
<p id="vb2" class="vb">&nbsp;</p>
<p id="vb3" class="vb">&nbsp;</p>
<p id="vb4" class="vb">&nbsp;</p>
<p id="vb5" class="vb">&nbsp;</p>
<p id="vb6" class="vb">&nbsp;</p>
<img id="sol1" class="sol" src="http://ekladata.com/iKzYZyZQ24jnHRzR96eKbFh-ElE.jpg" alt="" />
<img id="sol2" class="sol" src="http://ekladata.com/dE29cTRM3t555NnIJNukQ3ypDuY.jpg" alt="" />
<img id="sol3" class="sol" src="http://ekladata.com/HwKxRynTwHK2N4URm6AEaPJApAI.jpg" alt="" />
<img id="sol4" class="sol" src="http://ekladata.com/6_GVB2OeQLiBugZXRNwnMVm414M.jpg" alt="" />
<img id="sol5" class="sol" src="http://ekladata.com/qlrretBoJmE6C6K8OFLdAND6REo.jpg" alt="" />
<img id="sol6" class="sol" src="http://ekladata.com/1lLt0iZCLbTQzMbIOMMTGYm5nws.jpg" alt="" />
</div>
<style><!--
#vb0{position:absolute; z-index:1; width:80px; font-size:20px; color:white; transform:translate(920px,0px);}
.vb{position:absolute; z-index:5; width:30px; height:30px; background:coral; border-radius:10px 0 0 10px; box-shadow:inset 0px 0px 5px 2px black;}
#vb1{transform:translate(970px,50px);}
#vb2{transform:translate(970px,100px);}
#vb3{transform:translate(970px,150px);}
#vb4{transform:translate(970px,200px);}
#vb5{transform:translate(970px,250px);}
#vb6{transform:translate(970px,300px);}
.sol{position:absolute; z-index:1; width:1000px; height:562px; opacity:0; filter:grayscale(1); transition:all 1s, filter 1s 1s;}
#vb1:hover ~ #sol1,#vb2:hover ~ #sol2,#vb3:hover ~ #sol3,#vb4:hover ~ #sol4,#vb5:hover ~ #sol5,#vb6:hover ~ #sol6{opacity:1; filter:grayscale(0);}
--></style>