Exemple 191

Pour qu'un survol fonctionne, il faut que le curseur reste au dessus de l'élément survolé donc que celui reste fixe et non recouvert par un autre élément.

Dans ce montage, la vignette survolée reste toujours en premier plan mais comme son image de fond est la partie exacte de l'image qu'elle dévoile, elle devient invisible.

 

 

 

 

 

 

 

 

 

 

 

<div style="width: 1000px; height: 562px; border: 1px solid black; margin: 5px auto; background: url('http://ekladata.com/_Ap0bRnScWbepQvmJmjgFfFHsIM.jpg'); background-size: cover; text-align: left;">
<p id="drt">&nbsp;</p>
<p id="vgt1" class="vgt">&nbsp;</p>
<p id="vgt2" class="vgt">&nbsp;</p>
<p id="vgt3" class="vgt">&nbsp;</p>
<p id="vgt4" class="vgt">&nbsp;</p>
<p id="vgt5" class="vgt">&nbsp;</p>
<p id="vgt6" class="vgt">&nbsp;</p>
<p id="vgt7" class="vgt">&nbsp;</p>
<p id="vgt8" class="vgt">&nbsp;</p>
<p id="vgt9" class="vgt">&nbsp;</p>
<p id="vgt10" class="vgt">&nbsp;</p>
<img id="pl1" class="pl" src="http://ekladata.com/4TZ-kNzI1zsePj_uiFmqL4wruZQ.jpg" alt="" /> <img id="pl2" class="pl" src="http://ekladata.com/WGNYU8iafAEgLlD4RL8o9hsKnZg.jpg" alt="" /> <img id="pl3" class="pl" src="http://ekladata.com/yJvTs3ivlP0MM-trUH3mBvmyBR4.jpg" alt="" /> <img id="pl4" class="pl" src="http://ekladata.com/8rH_1QSPij1A_jvr_gsPmkIwabU.jpg" alt="" /> <img id="pl5" class="pl" src="http://ekladata.com/eSxPCzrFmzvblkK6ReZm9WF87UE.jpg" alt="" /> <img id="pl6" class="pl" src="http://ekladata.com/b-2QVjRS1IzXP-NPyUHn5PUhgy8.jpg" alt="" /> <img id="pl7" class="pl" src="http://ekladata.com/MO4dkhJZNKh7WtDU916O_pw44Gw.jpg" alt="" /> <img id="pl8" class="pl" src="http://ekladata.com/Hre6qmGRzIk6d9Jjy0XoJb_X6ME.jpg" alt="" /> <img id="pl9" class="pl" src="http://ekladata.com/eT9nddXuGVxXjhaQhavwOBoa2Jc.jpg" alt="" /> <img id="pl10" class="pl" src="http://ekladata.com/tobwxd_CuB3Myjh9L4TQJAxPFVE.jpg" alt="" />

</div>

<style><!--
#drt{position:absolute; z-index:1; width:40px; height:562px; background:rgba(255,255,255,0.3); transform:translate(960px,0px);}
.vgt{position:absolute; z-index:1; width:30px; height:30px;}
#vgt1{background:url('http://ekladata.com/4TZ-kNzI1zsePj_uiFmqL4wruZQ.jpg'); background-size:1000px 562px; background-position:-965px -10px;transform:translate(965px,10px);}
#vgt2{background:url('http://ekladata.com/WGNYU8iafAEgLlD4RL8o9hsKnZg.jpg'); background-size:1000px 562px; background-position:-965px -60px;transform:translate(965px,60px);}
#vgt3{background:url('http://ekladata.com/yJvTs3ivlP0MM-trUH3mBvmyBR4.jpg'); background-size:1000px 562px; background-position:-965px -110px;transform:translate(965px,110px);}
#vgt4{background:url('http://ekladata.com/8rH_1QSPij1A_jvr_gsPmkIwabU.jpg'); background-size:1000px 562px; background-position:-965px -160px;transform:translate(965px,160px);}
#vgt5{background:url('http://ekladata.com/eSxPCzrFmzvblkK6ReZm9WF87UE.jpg'); background-size:1000px 562px; background-position:-965px -210px;transform:translate(965px,210px);}
#vgt6{background:url('http://ekladata.com/b-2QVjRS1IzXP-NPyUHn5PUhgy8.jpg'); background-size:1000px 562px; background-position:-965px -260px;transform:translate(965px,260px);}
#vgt7{background:url('http://ekladata.com/MO4dkhJZNKh7WtDU916O_pw44Gw.jpg'); background-size:1000px 562px; background-position:-965px -310px;transform:translate(965px,310px);}
#vgt8{background:url('http://ekladata.com/Hre6qmGRzIk6d9Jjy0XoJb_X6ME.jpg'); background-size:1000px 562px; background-position:-965px -360px;transform:translate(965px,360px);}
#vgt9{background:url('http://ekladata.com/eT9nddXuGVxXjhaQhavwOBoa2Jc.jpg'); background-size:1000px 562px; background-position:-965px -410px;transform:translate(965px,410px);}
#vgt10{background:url('http://ekladata.com/tobwxd_CuB3Myjh9L4TQJAxPFVE.jpg'); background-size:1000px 562px; background-position:-965px -460px;transform:translate(965px,460px);}
.pl{position:absolute; z-index:4; width:0px; height:562px; transition:all 1s linear;}
#vgt1:hover,#vgt2:hover,#vgt3:hover,#vgt4:hover,#vgt5:hover,#vgt6:hover,#vgt7:hover,#vgt8:hover,#vgt9:hover,#vgt10:hover{z-index:5;}
#vgt1:hover ~ #pl1,#vgt2:hover ~ #pl2,#vgt3:hover ~ #pl3,#vgt4:hover ~ #pl4,#vgt5:hover ~ #pl5,#vgt6:hover ~ #pl6,#vgt7:hover ~ #pl7,#vgt8:hover ~ #pl8,#vgt9:hover ~ #pl9,#vgt10:hover ~ #pl10{width:1000px;}
--></style>