• Exemple 82

    Survol

     

     

     

     

     

     

     

    <div style="width: 1000px; height: 563px; margin: 5px auto; ">
    <p id="bdv1" class="bdv">&nbsp;</p>
    <p id="bdv2" class="bdv">&nbsp;</p>
    <p id="bdv3" class="bdv">&nbsp;</p>
    <p id="bdv4" class="bdv">&nbsp;</p>
    <p id="bdh1" class="bdh">&nbsp;</p>
    <p id="bdh2" class="bdh">&nbsp;</p>
    <p id="bdh3" class="bdh">&nbsp;</p>
    </div>

    <style><!--
    .bdv{position:absolute; width:100px; height:563px; box-shadow:inset -3px -3px 6px white, inset 3px 3px 6px black; transition:all 1s linear;}
    #bdv1{z-index:1; background:url('http://ekladata.com/hPk3-TFcQ_1i2XRQufGBTwzbCFE@1000x563.jpg'); background-position: -120px 0px; transform:translate(120px,0px);}
    #bdv2{z-index:3; background:url('http://ekladata.com/_HUwzWhtyLd5qzaZ924iEwFOwi0@1000x563.jpg'); background-position: -340px 0px; transform:translate(340px,0px);}
    #bdv3{z-index:5; background:url('http://ekladata.com/PHg5JfaUyOdSmnu6k69AygRKP7A@1000x563.jpg'); background-position: -560px 0px; transform:translate(560px,0px);}
    #bdv4{z-index:7; background:url('http://ekladata.com/y1s9BsQXZnoYCLpW2hQV63wiITk@1000x563.jpg'); background-position: -780px 0px; transform:translate(780px,0px);}
    .bdh{position:absolute; z-index:1; width:1000px; height:100px; box-shadow:inset -3px -3px 6px white, inset 3px 3px 6px black; transition:all 1s linear;}
    #bdh1{z-index:2; background:url('http://ekladata.com/r_NzXFlEgoA1ONrunFDAzOCDJ0k@1000x563.jpg'); background-position: 0px -66px; transform:translate(0px,66px);}
    #bdh2{z-index:4; background:url('http://ekladata.com/TOCEWZsYefAwJzrZm3yHtw8B7Ik@1000x563.jpg'); background-position: 0px -232px; transform:translate(0px,232px);}
    #bdh3{z-index:6; background:url('http://ekladata.com/KNkDFKvN-6RiVrLhkISSjRty3fs@1000x563.jpg'); background-position: 0px -398px; transform:translate(0px,398px);}
    #bdv1:hover,#bdv2:hover,#bdv3:hover,#bdv4:hover,#bdh1:hover,#bdh2:hover,#bdh3:hover{z-index:20; width:1000px; height:563px; background-position: 0px 0px; transform:translate(0px,0px);}
    --></style>