• Exemple 232

    Le survol d'une image la fait s'agrandir en rétrécissant les autres. 8 images au ratio 16/9.

     

     

     

     

     

     

     

     

    <div id="cont">
    <p id="c1" class="flex">&nbsp;</p>
    <p id="c2" class="flex">&nbsp;</p>
    <p id="c3" class="flex">&nbsp;</p>
    <p id="c4" class="flex">&nbsp;</p>
    </div>
    <div id="conta">
    <p id="c1a" class="flex">&nbsp;</p>
    <p id="c2a" class="flex">&nbsp;</p>
    <p id="c3a" class="flex">&nbsp;</p>
    <p id="c4a" class="flex">&nbsp;</p>
    </div>
    <style><!--
    .flex{border:4px ridge white; height:300px; flex-grow:0.3;filter:grayscale(1); transition:all 1s linear;}
    #cont{display:flex; width:1000px; height:300px; justify-content:center; align-items:center; margin:0 auto;}
    #c1{box-sizing:border-box; background:url('http://ekladata.com/IUrpAD7Z_HtN4S9odbprI-sdg0I.jpg'); background-size:cover;}
    #c2{box-sizing:border-box; background:url('http://ekladata.com/NQGOTNJ02ayw9-ea9HeF2qTwN0c.jpg'); background-size:cover;}
    #c3{box-sizing:border-box; background:url('http://ekladata.com/lgA_RAU5m-gFYHFOkxPjQWPHob8.jpg'); background-size:cover;}
    #c4{box-sizing:border-box; background:url('http://ekladata.com/fGsxIEJd_DAAE1l1usViIZc2HzI.jpg'); background-size:cover;}
    #c1:hover,#c2:hover,#c3:hover,#c4:hover{z-index:5; flex-grow:9; height:506px;filter:grayscale(0); margin:200px 0 0 0;}
    #conta{display:flex; width:1000px; height:300px; justify-content:center; align-items:center; margin:0 auto;}
    #c1a{box-sizing:border-box; background:url('http://ekladata.com/AlBnxMo8Y2xnQgiRb5czUliN410.jpg'); background-size:cover;}
    #c2a{box-sizing:border-box; background:url('http://ekladata.com/_gSecZninEd-_RPSthWfKU2mtBk.jpg'); background-size:cover;}
    #c3a{box-sizing:border-box; background:url('http://ekladata.com/5pIEopVTBjeefO_DhV7LOaPtMjk.jpg'); background-size:cover;}
    #c4a{box-sizing:border-box; background:url('http://ekladata.com/UZfHrfJVpDaYSs3ra_aw4maVtXA.jpg'); background-size:cover;}
    #c1a:hover,#c2a:hover,#c3a:hover,#c4a:hover{z-index:5; flex-grow:9; height:506px; filter:grayscale(0); margin:0 0 215px 0; }
    --></style>