• Mont.3.5.23

     Ne m'en veuillez pas trop mais, pour me simplifier la tâche, j'ai conservé les mêmes filtres au survol.

    7 images à survoler, au ratio 16/9 en 1100x619px et à changer au clic sur chaque bouton.

     


    <div style="position: relative; overflow: hidden; width: 1100px; height: 619px; text-align: left; margin: 30px auto;"><input id="cd0" class="cd" type="text" value="0" /> <input id="cd1" class="cd" type="text" value="1" /> <input id="cd2" class="cd" type="text" value="2" /> <input id="cd3" class="cd" type="text" value="3" /> <input id="cd4" class="cd" type="text" value="4" /> <input id="cd5" class="cd" type="text" value="5" /> <input id="cd6" class="cd" type="text" value="6" />
    <p id="fd">&nbsp;</p>
    <p id="def"><img id="db1" class="db" src="http://ekladata.com/vGqHdGcwiFL2DsN_M5Bto6HqF5Q.jpg" alt="" /><img id="db2" class="db" src="http://ekladata.com/vY0QBoAZj_0QHWFbAzrXXISRkGw.jpg" alt="" /><img id="db3" class="db" src="http://ekladata.com/jzgFJkisDJOCkm-L196nTM9Xzk0.jpg" alt="" /><img id="db4" class="db" src="http://ekladata.com/lxD4DqVQlpP2XiYfr0EYzDH5MOg.jpg" alt="" /><img id="db5" class="db" src="http://ekladata.com/BW-ba2RKT3SxFBhlVA-b9dpU3zk.jpg" alt="" /><img id="db6" class="db" src="http://ekladata.com/4cuRTPUySPJn6x1JOSOxGfVeJjA.jpg" alt="" /><img id="db7" class="db" src="http://ekladata.com/ZiyYyDHxjd3iaj1esUq_wpvHRYc.jpg" alt="" /></p>
    </div>
    <style><!--
    .cd{position:absolute; z-index:5; width:30px; height:30px; border-radius:50%; border:1px solid black; box-shadow:inset 3px 3px 5px black; background:white; text-align:center; line-height:40px; font-style:bold; font-size:35px;}
    .cd:focus{background:red;}
    #cd0{transform:translate(100px,585px);}
    #cd1{transform:translate(180px,585px);}
    #cd2{transform:translate(260px,585px);}
    #cd3{transform:translate(340px,585px);}
    #cd4{transform:translate(420px,585px);}
    #cd5{transform:translate(500px,585px);}
    #cd6{transform:translate(580px,585px);}
    #fd{position:absolute; z-index:2; width:450px; height:40px; background:rgba(0,0,0,0.5); transform:translate(0px,579px);}
    #def{position:absolute; z-index:1; width:1100px; height:3715px; transition:all 1s;}
    .db{width:1100px; height:619px;transition:all 2s;}
    #db1{filter:grayscale(1) contrast(1); clip-path:polygon(50% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 50%);}
    #db2{filter:hue-rotate(90deg); clip-path:polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%, 50% 100%);}
    #db3{filter:hue-rotate(180deg); clip-path:polygon(0% 50%, 100% 0%, 100% 100%, 100% 100%, 0% 50%);}
    #db4{filter:hue-rotate(240deg); clip-path:polygon(50% 0%, 50% 0%, 100% 100%, 100% 100%, 0% 100%);}
    #db5{filter:hue-rotate(120deg); clip-path:polygon(0% 0%, 100% 50%, 100% 50%, 0% 100%, 0% 100%);}
    #db6{filter:invert(1); clip-path:polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%, 50% 100%); }
    #db7{filter:saturate(300%); border-radius:50%; }
    #cd0:focus ~#def{transform:translate(0px,0px);}
    #cd1:focus ~#def{transform:translate(0px,-619px);}
    #cd2:focus ~#def{transform:translate(0px,-1238px);}
    #cd3:focus ~#def{transform:translate(0px,-1857px);}
    #cd4:focus ~#def{transform:translate(0px,-2476px);}
    #cd5:focus ~#def{transform:translate(0px,-3095px);}
    #cd6:focus ~#def{transform:translate(0px,-3714px);}
    #cd7:focus ~#def{transform:translate(0px,-4333px);}
    #db1:hover,#db2:hover,#db3:hover,#db4:hover,#db5:hover,#db6:hover,#db7:hover{filter:none; border-radius:0%; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%,0% 100%);}
    --></style>