• 04.02.2024

    Montage en 800x600px, ratio 4/3, adaptable à d'autres tailles et ratio.

    Images déjà publiées, désolé, mais il vous faut remplacer les 4 adresses de mes images par les vôtres.

    Le principe est de faire une sélection (clip-path) du quart, sur une image en arrondi.

    SURVOL

     

     

     

     


    <div style="width: 800px; height: 600px; margin: 50px auto;">
    <p id="sv">SURVOL</p>
    <p id="q1" class="qt">&nbsp;</p>
    <p id="q2" class="qt">&nbsp;</p>
    <p id="q3" class="qt">&nbsp;</p>
    <p id="q4" class="qt">&nbsp;</p>
    </div>
    <style><!--
    #sv{position:absolute; z-index:1; width:140px; font-size:30px; color:white; text-shadow:2px 2px black;}
    .qt{position:absolute; z-index:1; width:800px; height:600px; border-radius:50%; filter:grayscale(1); transition:all 1s;}
    #q1{ background:url('http://ekladata.com/bam54fIr5WpxKXaL4vMIV2LAtzU.jpg'); background-size:800px 600px; clip-path:polygon(51% 0%, 100% 0%, 100% 49%,51% 49%);}
    #q2{background:url('http://ekladata.com/W7sol3JyvXdwvObov_1VIrtZN9c.jpg'); background-size:800px 600px; clip-path:polygon(51% 51%, 100% 51%, 100% 100%,51% 100%); }
    #q3{background:url('http://ekladata.com/MT8pWEnRHS-j7oXVk1R-afzT5mw.jpg'); background-size:800px 600px; clip-path:polygon(0% 51%, 49% 51%, 49% 100%,0% 100%);}
    #q4{background:url('http://ekladata.com/j-8KSQ8QDK5TuvOjJh1_vPG33OA.jpg'); background-size:800px 600px; clip-path:polygon(0% 0%, 49% 0%, 49% 49%,0% 49%);}
    #q1:hover, #q2:hover,#q3:hover, #q4:hover{z-index:5;width:800px; height:600px; border-radius:0%; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); filter:grayscale(0);}
    --></style>