• Art.31.5.21

    Montage en 1000px par 562px (16/9); 8 images au ratio 16/9.
    Le cadre et le fond peuvent être supprimés si vous le souhaitez.

    Survol

     

     

     

     

     

     

     

     

    <div style="width: 1000px; height: 562px; border: 1px solid black; margin: 20px auto; text-align: left; background: radial-gradient(ellipse at center, #86aecc 0%,#d4e4ef 50%,#86aecc 100%);">
    <p id="flr0">Survol</p>
    <p id="flr1" class="flr">&nbsp;</p>
    <p id="flr2" class="flr">&nbsp;</p>
    <p id="flr3" class="flr">&nbsp;</p>
    <p id="flr4" class="flr">&nbsp;</p>
    <p id="flr5" class="flr">&nbsp;</p>
    <p id="flr6" class="flr">&nbsp;</p>
    <p id="flr7" class="flr">&nbsp;</p>
    <p id="flr8" class="flr">&nbsp;</p>
    </div>

    <style><!--
    #flr0{position:absolute; z-index:1; width:110px; font-size:30px; color:coral; text-shadow:2px 2px black; transform:translate(440px,250px);}
    .flr{position:absolute; z-index:1; width:200px; height:200px; box-shadow:inset 4px 4px 8px black, inset -4px -4px 8px white;transition:all 1s;}
    #flr1{background:url('http://ekladata.com/bpjT-KpF69eyqTOzHOqHA1h9Re0.jpg'); background-position:-230px -80px; background-size:1000px 562px; transform:translate(230px,80px); border-radius: 50% 50% 50% 0; }
    #flr2{background:url('http://ekladata.com/a_MBZgwZCwbr_O0_2UFVWr-djfk.jpg'); background-position:-230px -290px; background-size:1000px 562px; transform:translate(230px,290px); border-radius: 0 50% 50% 50%;}
    #flr3{background:url('http://ekladata.com/-fbYWEUvcX7mlCv0efbU8PACYZ0.jpg'); background-position:-20px -290px; background-size:1000px 562px; transform:translate(20px,290px); border-radius: 50% 0 50% 50%;}
    #flr4{background:url('http://ekladata.com/Dd300TTl0I6TBy59xb0cDGX7dGM.jpg'); background-position:-20px -80px; background-size:1000px 562px; transform:translate(20px,80px); border-radius: 50% 50% 0 50%;}
    #flr5{background:url('http://ekladata.com/4w_mJ4ZFeRooDwIBy0YAB6CRcU4.jpg'); background-position:-780px -80px; background-size:1000px 562px; transform:translate(780px,80px); border-radius: 50% 50% 50% 0;}
    #flr6{background:url('http://ekladata.com/eKJCf8mWcINRAlSZk9MZFvhvp38.jpg'); background-position:-780px -290px; background-size:1000px 562px; transform:translate(780px,290px); border-radius: 0 50% 50% 50%;}
    #flr7{background:url('http://ekladata.com/4V0NTbyVT3NJS6qjmJTsq1uGcF8.jpg'); background-position:-570px -290px; background-size:1000px 562px; transform:translate(570px,290px); border-radius: 50% 0 50% 50%;}
    #flr8{background:url('http://ekladata.com/Q4fMQTZdYQhANhjYRvXiOPYiw-k.jpg'); background-position:-570px -80px; background-size:1000px 562px; transform:translate(570px,80px); border-radius: 50% 50% 0 50%;}
    #flr1:hover,#flr2:hover,#flr3:hover,#flr4:hover,#flr5:hover,#flr6:hover,#flr7:hover,#flr8:hover{z-index:5;width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,0px);border-radius: 0; }
    --></style>