• Exemple 188

    8 images au ratio 16/9

    Survol pour éclairer et clic maintenu pour agrandir et colorer.

    <div style="width: 999px; height: 561px; margin: 5px auto; text-align: left;">

    <p id="mes">Survol pour éclairer et clic maintenu pour agrandir et colorer.</p>

    <img id="plu1" class="plu" src="http://ekladata.com/VneYL5ydOf-wmr9BnXeoYMmwwZ0.jpg" alt="" />

    <img id="plu2" class="plu" src="http://ekladata.com/K0XlcAxzJQpzuOh0fcjHbqfR4Ts.jpg" alt="" />

    <img id="plu3" class="plu" src="http://ekladata.com/Dv_cquD1uOpUr_yW_uM1nPdJgME.jpg" alt="" />

    <img id="plu4" class="plu" src="http://ekladata.com/7t5q0FQ9Ku5pwyG4nbqLhcJKYXU.jpg" alt="" />

    <img id="plu5" class="plu" src="http://ekladata.com/MZ5Ji2bYP8GYc_K-_2WMpUUvgyY.jpg" alt="" />

    <img id="plu6" class="plu" src="http://ekladata.com/ou5IlZnoiCQAXGhbTBR9AFF-8b8.jpg" alt="" />

    <img id="plu7" class="plu" src="http://ekladata.com/2BFpIWwpO5BuresZ3M-3z40CMPg.jpg" alt="" />

    <img id="plu8" class="plu" src="http://ekladata.com/Wj4SnDha3sEXQIirLyJuaWs3IiU.jpg" alt="" />

    </div>

    <style><!--

    #mes{position:absolute; z-index:1; width:333px; height:187px; transform:translate(333px,187px); text-align:center; font-size:20px; line-height:90px;}

    .plu{position:absolute; z-index:1; width:333px; height:187px; border:6px ridge white; filter:grayscale(1); opacity:0.6; transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s,filter 1s linear 1s;}

    #plu1{box-sizing:border-box; transform:translate(0px,0px);}

    #plu2{box-sizing:border-box; transform:translate(333px,0px);}

    #plu3{box-sizing:border-box; transform:translate(666px,0px);}

    #plu4{box-sizing:border-box; transform:translate(0px,187px);}

    #plu5{box-sizing:border-box; transform:translate(666px,187px);}

    #plu6{box-sizing:border-box; transform:translate(0px,374px);}

    #plu7{box-sizing:border-box; transform:translate(333px,374px);}

    #plu8{box-sizing:border-box; transform:translate(666px,374px);}

    #plu1:hover,#plu2:hover,#plu3:hover,#plu4:hover,#plu5:hover,#plu6:hover,#plu7:hover,#plu8:hover{opacity:1;}

    #plu1:active,#plu2:active,#plu3:active,#plu4:active,#plu5:active,#plu6:active,#plu7:active,#plu8:active{z-index:5; width:999px; height:561px; transform:translate(0px,0px); filter:grayscale(0);}

    --></style>