• Montage 291

    1 (fond) + 6 images au ratio 16/9

    Clic pour changer d'image.

    Survol

     

     

     

     

     

    <div style="width: 900px; height: 506px; margin: 5px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/NkkjxfvOlO_LF9J0Di5pqN0IT8E.jpg'); background-size: cover;"><input id="choix1" class="choix" type="text" /> <input id="choix2" class="choix" type="text" /> <input id="choix3" class="choix" type="text" /> <input id="choix4" class="choix" type="text" /> <input id="choix5" class="choix" type="text" />
    <p id="cc">Clic pour changer d'image.</p>
    <p id="des">Survol</p>
    <p id="des1">&nbsp;</p>
    <p id="cp1" class="cp">&nbsp;</p>
    <p id="cp2" class="cp">&nbsp;</p>
    <p id="cp3" class="cp">&nbsp;</p>
    <p id="cp4" class="cp">&nbsp;</p>
    </div>

    <style><!--
    .choix{position:absolute; z-index:1; width:20px; height:20px; border:none; border-radius:50%; box-shadow:inset 4px 4px 6px black;}
    #choix1{transform:translate(780px,180px);}
    #choix2{transform:translate(830px,180px);}
    #choix3{transform:translate(780px,250px);}
    #choix4{transform:translate(830px,250px);}
    #choix5{transform:translate(805px,320px);}
    #cc{position:absolute; z-index:1; width:150px; text-aling:center; font-size:15px; color:white; text-shadow:1px 1px black; transform:translate(750px,20px);}
    #des{position:absolute; z-index:1; width:80px; height:20px; text-align:center; border:1px ridge black; background:lime; font-size:12px; line-height:20px; box-shadow:inset 3px 3px 6px black; transform:translate(780px,400px);}
    #des1{position:absolute; z-index:10; width:80px; height:20px; transform:translate(780px,400px);}
    .cp{position:absolute; z-index:1; width:900px; height:506px; background:url('http://ekladata.com/l4msdUX6x4096DZojXex83SDa9c.jpg'); background-size:900px 506px;}
    #cp1{clip-path:polygon(0% 0%, 8% 0%, 8% 100%, 0% 100%);  transition:all 1s linear 0s; -webkit-clip-path:polygon(0% 0%, 8% 0%, 8% 100%, 0% 100%);}

    #cp2{clip-path:polygon(25% 0%, 33% 0%, 33% 100%, 25% 100%);  transition:all 1s linear 0.2s; -webkit-clip-path:polygon(25% 0%, 33% 0%, 33% 100%, 25% 100%);}

    #cp3{clip-path:polygon(50% 0%, 58% 0%, 58% 100%, 50% 100%);  transition:all 1s linear 0.4s; -webkit-clip-path:polygon(50% 0%, 58% 0%, 58% 100%, 50% 100%);}

    #cp4{clip-path:polygon(75% 0%, 83% 0%, 83% 100%, 75% 100%);  transition:all 1s linear 0.6s; -webkit-clip-path:polygon(75% 0%, 83% 0%, 83% 100%, 75% 100%); }

    #des1:hover ~ #cp1{clip-path:polygon(0% 0%, 25% 0%, 25% 100%, 0% 100%); -webkit-clip-path:polygon(0% 0%, 25% 0%, 25% 100%, 0% 100%);}

    #des1:hover ~ #cp2{clip-path:polygon(25% 0%, 50% 0%, 50% 100%, 25% 100%); -webkit-clip-path:polygon(25% 0%, 50% 0%, 50% 100%, 25% 100%);}

    #des1:hover ~ #cp3{clip-path:polygon(50% 0%, 75% 0%, 75% 100%, 50% 100%); -webkit-clip-path:polygon(50% 0%, 75% 0%, 75% 100%, 50% 100%);}

    #des1:hover ~ #cp4{clip-path:polygon(75% 0%, 100% 0%, 100% 100%, 75% 100%); -webkit-clip-path:polygon(75% 0%, 100% 0%, 100% 100%, 75% 100%);}

    #choix1:focus ~ .cp{background:url('http://ekladata.com/Z21rdwstzeyUIAlZrnp-ZjqW53g.jpg'); background-size:900px 506px;}
    #choix2:focus ~ .cp{background:url('http://ekladata.com/c3D4VWoQiZnsVnKweQ0KFQVsasY.jpg'); background-size:900px 506px;}
    #choix3:focus ~ .cp{background:url('http://ekladata.com/5xBHjzbRkDXlu2vtTevrADSRyY8.jpg'); background-size:900px 506px;}
    #choix4:focus ~ .cp{background:url('http://ekladata.com/RtCLs-hltBCuwQIugOhfC9jlBSk.jpg'); background-size:900px 506px;}
    #choix5:focus ~ .cp{background:url('http://ekladata.com/p3A0IpTHKU0YS8p5EVqrmD0wkZk.jpg'); background-size:900px 506px;}
    --></style>