• Montage 304

     5 images au ratio 16/99.

    Survol

     

     

     

     

     

    <div style="position: relative; width: 900px; height: 506px; margin: 5px auto; text-align: left; border: 1px solid black; background: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 100%); overflow: hidden;">
    <p id="frd0">Survol</p>
    <p id="frd1" class="frd">&nbsp;</p>
    <p id="frd2" class="frd">&nbsp;</p>
    <p id="frd3" class="frd">&nbsp;</p>
    <p id="frd4" class="frd">&nbsp;</p>
    <p id="frd5" class="frd">&nbsp;</p>
    </div>
    <style><!--
    #frd0{position:absolute; z-index:1; width:300px; font-size:2vw; transform:translate(180px,30px);}
    .frd{position:absolute; z-index:1; width:900px; height:506px; filter:hue-rotate(90deg); transition:all 1s linear 0s, filter 1s linear 1s;}
    #frd1{box-sizing:border-box; border:5px solid white; width:450px;border-radius:0 50% 50% 0; background:url('http://ekladata.com/nk7v48hLBgt2W0Vx_emOdGIRT3k.jpg'); background-size:900px 506px; background-position:225px 0px; transform:translate(-225px,0px);}
    #frd2{box-sizing:border-box; border:5px solid white; width:450px; border-radius:50% 0 0 50%;background:url('http://ekladata.com/WuOAElSzot4rpWyek5Cuab_Bpb4.jpg'); background-size:900px 506px; background-position:-700px -0px; transform:translate(700px,0px);}
    #frd3{box-sizing:border-box; border:5px solid white; width:200px; height:200px; border-radius:50%; background:url('http://ekladata.com/r0UfktK5ZENRuMExxP1fIZM4Wa4.jpg'); background-size:900px 506px; background-position:-350px -50px; transform:translate(350px,50px);}
    #frd4{box-sizing:border-box; border:5px solid white; width:200px; height:200px; border-radius:50%; background:url('http://ekladata.com/1iqbqXzseiq6QJw19l2KddaDejg.jpg'); background-size:900px 506px; background-position:-220px -270px; transform:translate(220px,270px);}
    #frd5{box-sizing:border-box; border:5px solid white; width:200px; height:200px; border-radius:50%; background:url('http://ekladata.com/V36Kx5FpIbUDI-T7SnbP_m7ahmw.jpg'); background-size:900px 506px; background-position:-500px -270px; transform:translate(500px,270px);}
    #frd1:hover,#frd2:hover,#frd3:hover,#frd4:hover,#frd5:hover{z-index:5; width:900px; height:506px; border-radius:0%; transform:translate(0px,0px); filter:hue-rotate(0deg); background-position:0px 0px;}
    --></style>