• Nicole 1

    Le demande est pour un code de 6 images avec agrandissement au survol.

    Voici une proposition pour 6 images en 16/9 avec agrandissement pour remplir le cadre.

    Survol


    <div style="width: 56vw; height: 31.5vw; margin: 0vh auto; border: 0.5vh ridge grey; background: linear-gradient(to bottom, #6699cc 0%, #99ffff 100%); text-align: left;">
    <p id="nic0">Survol</p>
    <img id="nic1" class="nic" src="http://ekladata.com/Dn4AOoYzv_9c5S414lgUwgNzKl0.jpg" alt="" />
    <img id="nic2" class="nic" src="http://ekladata.com/u5aBs_zXg2fid3UL3Vt1xVF1_4I.jpg" alt="" />
    <img id="nic3" class="nic" src="http://ekladata.com/p8RwhUnpyS-Wij8MIA94cGX6pOc.jpg" alt="" />
    <img id="nic4" class="nic" src="http://ekladata.com/jyi4EATy8Lb9X6iU2LxWuUJFcck.jpg" alt="" />
    <img id="nic5" class="nic" src="http://ekladata.com/uGO35ncQc1idYPljeLj3cpyjlug.jpg" alt="" />
    <img id="nic6" class="nic" src="http://ekladata.com/OoEfoIrSlkivyxHaW5a5Jq93LjY.jpg" alt="" />
    </div>
    <style><!--
    #nic0{position:absolute; z-index:1; width:10vw; height:3vw; transform:translate(23vw,0.5vw); text-align:center; line-height:3vw; color:red; text-shadow:0.1vh 0.1vh black; font-size:2vw; }
    .nic{position:absolute; z-index:1; width:16vw; height:9vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; transition:all 1.5s linear;}
    #nic1{transform:translate(2vw,5vw);}
    #nic2{transform:translate(20vw,5vw);}
    #nic3{transform:translate(38vw,5vw);}
    #nic4{transform:translate(2vw,19vw);}
    #nic5{transform:translate(20vw,19vw);}
    #nic6{transform:translate(38vw,19vw);}
    #nic1:hover,#nic2:hover,#nic3:hover,#nic4:hover,#nic5:hover,#nic6:hover{z-index:10; width:56vw; height:31.5vw; border:none; box-shadow:none; transform:translate(0vw,0vw);}
    --></style>