• Montage 324

    Variante: 4 images au ratio 16/9.

    SURVOL

     

     

     

     

    <div style="width: 900px; height: 506px; margin: 5px auto; text-align: left;">
    <p id="ret0">SURVOL</p>
    <p id="ret1" class="ret">&nbsp;</p>
    <p id="ret2" class="ret">&nbsp;</p>
    <p id="ret3" class="ret">&nbsp;</p>
    <p id="ret4" class="ret">&nbsp;</p>
    </div>

    <style><!--
    @import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
    #ret0{position:absolute; z-index:1; width:100px; font-size:20px; transform:translate(100px,20px); font-family: 'Kaushan Script', cursive;}
    .ret{position:absolute; z-index:1; width:200px; height:200px; border:1px solid white; transition:all 1s linear;}
    #ret1{background:url('http://ekladata.com/Wtp_RIXhSTC7cfxQKbcM4-6zQgI.jpg'); background-size:cover; border-radius:100% 0% 0% 0%; transform:translate(220px,40px); filter:drop-shadow( 4px 4px 6px black); box-shadow:inset 4px 4px 6px black;}
    #ret2{background:url('http://ekladata.com/6na8uTyCnYMmJUOtSUKBHzi3-rM.jpg'); background-size:cover; border-radius:0% 100% 0% 0%; transform:translate(450px,40px);filter:drop-shadow( -4px 4px 6px black); box-shadow:inset -4px 4px 6px black;}
    #ret3{background:url('http://ekladata.com/2LtfPRIL1Rrz-itBHq-BY8Wuirw.jpg'); background-size:cover; border-radius:0% 0% 100% 0%; transform:translate(450px,270px); filter:drop-shadow(-4px -4px 6px black); box-shadow:inset -4px -4px 6px black;}
    #ret4{background:url('http://ekladata.com/F01KcTf5rat7Dq1qD7aKdCeu3lY.jpg'); background-size:cover; border-radius:0% 0% 0% 100%; transform:translate(220px,270px); filter:drop-shadow( 4px -4px 6px black); box-shadow:inset 4px -4px 6px black;}
    #ret1:hover,#ret2:hover,#ret3:hover,#ret4:hover{z-index:5; width:900px; height:506px; border-radius:0%; transform:translate(0px,0px); filter:none;}
    --></style>