• Montage 300

    4 images au ratio 16/9; un fond uni est nécessaire pour les ombres du flou.

     

     

     

     

    Survol

    <div style="width: 900px; height: 506px; margin: 1vh auto; background: white; border: 6px ridge grey; text-align: left;">
    <p id="omb1" class="omb">&nbsp;</p>
    <p id="omb2" class="omb">&nbsp;</p>
    <p id="omb3" class="omb">&nbsp;</p>
    <p id="omb4" class="omb">&nbsp;</p>
    <p id="vc">Survol</p>
    </div>

    <style><!--
    #vc{position:absolute; z-index:1; width:120px; font-size:30px; transform:translate(400px,240px);}
    .omb{position:absolute; z-index:1; opacity:0.5; filter:grayscale(1); opacity:0.5; width:400px; height:225px; border-radius:40px; box-shadow: inset 10px 10px 20px 10px white,inset -10px -10px 20px 10px white; transition:all 1s linear;}
    #omb1{ background:url('http://ekladata.com/5wA0h86_WEvR9rDtqDNdAorJouw.jpg'); background-size:900px 506px; background-position:-20px -20px; transform:translate(20px,20px);}
    #omb2{ background:url('http://ekladata.com/QLygbYtsL1e2b6u4cFUKA9SeSJQ.jpg'); background-size:900px 506px; background-position:-480px -20px; transform:translate(480px,20px);}
    #omb3{ background:url('http://ekladata.com/ITKeBnCcSaSZnn7B8RnFAhsT3-Q.jpg'); background-size:900px 506px; background-position:-20px -280px; transform:translate(20px,280px);}
    #omb4{ background:url('http://ekladata.com/3Wu_5RBQ97aHi0hpBpMeuQgjosk.jpg'); background-size:900px 506px; background-position:-480px -280px; transform:translate(480px,280px);}
    #omb1:hover,#omb2:hover,#omb3:hover,#omb4:hover{z-index:5; width:900px; height:506px; border-radius:0px; box-shadow:none; background-position:0vw 0vw; transform:translate(0vw,0vw); opacity:1; filter:grayscale(0);}
    --></style>