• Montage 301

    4 images au ratio 16/9. L'écriture du code est pratique car très simple à modifier en dimension car écrit en %.

    Survol

     

     

     

     

    <div style="width: 900px; height: 506px; margin: 1vh auto; text-align: left; border: 5px auto; background: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 100%);">
    <p id="ex0">Survol</p>
    <p id="ex1" class="ex">&nbsp;</p>
    <p id="ex2" class="ex">&nbsp;</p>
    <p id="ex3" class="ex">&nbsp;</p>
    <p id="ex4" class="ex">&nbsp;</p>
    </div>

    <style><!--
    #ex0{position:absolute; z-index:2; width:150px; font-size:30px; transform:translate(100px,75px) rotate(30deg);}
    .ex{position:absolute; z-index:1; width:900px; height:506px; filter:sepia(1); transition:all 1s linear, filter 1s linear 1s;}
    #ex1{clip-path:polygon(0% 5%,45% 50%, 45% 50%, 0% 95%); background:url('http://ekladata.com/AIxSfi9AKhQ28lLaHRTwbPPyldw.jpg'); background-size:900px 506px;}
    #ex2{clip-path:polygon(5% 0%,95% 0%, 50% 45%, 50% 45%); background:url('http://ekladata.com/dUS0r1t8PE3s4DOw30Eo_TV_qm4.jpg'); background-size:900px 506px;}
    #ex3{clip-path:polygon(55% 50%,100% 5%, 100% 95%, 55% 50%); background:url('http://ekladata.com/xOJeBavDEngwzpb-ggr4rA4fdbo.jpg'); background-size:900px 506px;}
    #ex4{clip-path:polygon(50% 55%,50% 55%, 95% 100%, 5% 100%); background:url('http://ekladata.com/OIp8GIIaFgqNRJ41xf9yg_WHXQ4.jpg'); background-size:900px 506px;}
    #ex1:hover,#ex2:hover,#ex3:hover,#ex4:hover{z-index:5; filter:sepia(0); clip-path:polygon(0% 0%,100% 0%, 100% 100%, 0% 100%);
    --></style>