• Mont.02.5.23

    Montage publié en plus grand format. clic sur chaque bouton et survol de chaque image.

    7 images au ratio 16/9 en 1100x619px.

    J'ai laissé les mêmes animations mais vous êtes libre de les modifier.

     


    <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/7HoRLjRate4b6ZflHZBHJWPG-zg.jpg" alt="" /><img id="db2" class="db" src="http://ekladata.com/sK_pSsZQza3DKfn8qyXZvju83hU.jpg" alt="" /><img id="db3" class="db" src="http://ekladata.com/a9mu94mgyWLyaAGuj-3ZSTRUl9c.jpg" alt="" /><img id="db4" class="db" src="http://ekladata.com/Y48kIC6PTLXVmffYxEfft7kch3c.jpg" alt="" /><img id="db5" class="db" src="http://ekladata.com/JK1newq0CoFDWXC0RfvshLDVwr4.jpg" alt="" /><img id="db6" class="db" src="http://ekladata.com/Nj6cZLc_SaZiZqFGG37ZVwmISgs.jpg" alt="" /><img id="db7" class="db" src="http://ekladata.com/c5gmLnxtGfRZcsC-1C_Yx2zBX8w.jpg" alt="" /></p>
    </div>
    <style><!--
    .cd{position:absolute; z-index:5; width:40px; height:40px; 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(1050px,50px);}
    #cd1{transform:translate(1050px,120px);}
    #cd2{transform:translate(1050px,190px);}
    #cd3{transform:translate(1050px,260px);}
    #cd4{transform:translate(1050px,330px);}
    #cd5{transform:translate(1050px,400px);}
    #cd6{transform:translate(1050px,470px);}
    #fd{position:absolute; z-index:2; width:55px; height:619px; background:rgba(0,0,0,0.5); transform:translate(1045px,0px);}
    #def{position:absolute; z-index:1; width:7700px; height:619px; display:inline-block; transition:all 1s;}
    .db{width:1100px; height:619px;transition:all 2s;}
    #db1{filter:grayscale(1) contrast(1);}
    #db2{filter:hue-rotate(90deg);}
    #db3{filter:hue-rotate(180deg);}
    #db4{filter:hue-rotate(240deg);}
    #db5{filter:hue-rotate(120deg); border-radius:50%;}
    #db6{filter:invert(1);}
    #db7{filter:saturate(300%); border-radius:300px; }
    #cd0:focus ~#def{transform:translate(0px,0px);}
    #cd1:focus ~#def{transform:translate(-1100px,0px);}
    #cd2:focus ~#def{transform:translate(-2200px,0px);}
    #cd3:focus ~#def{transform:translate(-3300px,0px);}
    #cd4:focus ~#def{transform:translate(-4400px,0px);}
    #cd5:focus ~#def{transform:translate(-5500px,0px);}
    #cd6:focus ~#def{transform:translate(-6600px,0px);}
    #cd7:focus ~#def{transform:translate(-7700px,0px);}
    #db1:hover,#db2:hover,#db3:hover,#db4:hover,#db5:hover,#db6:hover,#db7:hover{filter:none; border-radius:0%;}
    --></style>