• Exemple 154

    1+6 images au ratio 16/9 

     

     

     

     

     

     

    Survol jusqu'à coloration "naturelle".

     <div style="width: 60vw; height: 33.75vw; margin: 1vw auto; border: 0.4vh ridge grey; background: url('http://ekladata.com/JwyAGwoxZLHQdqKUDn7OUhCOL84.jpg'); background-size: cover; text-align: left;">
    <p id="df1" class="df">&nbsp;</p>
    <p id="df2" class="df">&nbsp;</p>
    <p id="df3" class="df">&nbsp;</p>
    <p id="df4" class="df">&nbsp;</p>
    <p id="df5" class="df">&nbsp;</p>
    <p id="df6" class="df">&nbsp;</p>
    <p id="df7">Survol jusqu'à coloration "naturelle".</p>
    </div>

    <style><!--
    #df7{position:absolute; z-index:1; width:35vw; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(5vw,30vw);}
    .df{position:absolute; z-index:1; box-sizing:border-box; width:6vw; height:6vw; border:0.4vh solid white; border-radius:50%; box-shadow:0.4vh 0.4vh 0.6vh black; filter:hue-rotate(-270deg); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, background 1s linear 0s, filter 3s linear 1s;}
    #df1{transform:translate(45vw,2vw); background:url('http://ekladata.com/EIomXQMvLycBQbm-N0PXmv8C8Tc.jpg');background-position:-45vw -2vw; background-size:60vw 33.75vw;}
    #df2{transform:translate(45vw,10vw); background:url('http://ekladata.com/8Q7eT0XQ3VVuwny845KUhnQwRlw.jpg'); background-position:-45vw -10vw; background-size:60vw 33.75vw;}
    #df3{transform:translate(45vw,18vw); background:url('http://ekladata.com/pAWkSODZps3FZocLkcJTAK48o7o.jpg'); background-position:-45vw -18vw; background-size:60vw 33.75vw;}
    #df4{transform:translate(52vw,6vw); background:url('http://ekladata.com/aVHOd1HzUS5FGmvRYu7mBPxasn8.jpg'); background-position:-52vw -6vw; background-size:60vw 33.75vw;}
    #df5{transform:translate(52vw,14vw); background:url('http://ekladata.com/l1rKTLtiqizRhcxiQolXqLYpeIM.jpg'); background-position:-52vw -14vw; background-size:60vw 33.75vw;}
    #df6{transform:translate(52vw,22vw); background:url('http://ekladata.com/cp3azvRD40tMV074ZxpyZ7KVTLU.jpg'); background-position:-52vw -22vw; background-size:60vw 33.75vw;}
    #df1:hover,#df2:hover,#df3:hover,#df4:hover,#df5:hover,#df6:hover{z-index:5; background-size:60vw 33.75vw; transform:translate(0vw,0vw); background-position:0vw 0vw; width:60vw; height:33.75vw; border:none; border-radius:0%; box-shadow:none; filter:hue-rotate(0deg);}
    --></style>