• Exemple 168

     1+8 images au ratio 16/9; survol jusqu'à coloration.

     

     

     

     

     

     

     

     

    Survol

    <div style="width: 60vw; height: 34vw; margin: 1vh auto; border: 0.1vh solid black; background: url('http://ekladata.com/UNuUjVEYHhIcVy5IOfIivdkbW9Q.jpg'); background-size: cover; text-align: left;"><input id="kg1" class="kg" type="text" /> <input id="kg2" class="kg" type="text" /> <input id="kg3" class="kg" type="text" /> <input id="kg4" class="kg" type="text" /> <input id="kg5" class="kg" type="text" /> <input id="kg6" class="kg" type="text" /> <input id="kg7" class="kg" type="text" /> <input id="kg8" class="kg" type="text" />
    <p id="ky1" class="ky">&nbsp;</p>
    <p id="ky2" class="ky">&nbsp;</p>
    <p id="ky3" class="ky">&nbsp;</p>
    <p id="ky4" class="ky">&nbsp;</p>
    <p id="ky5" class="ky">&nbsp;</p>
    <p id="ky6" class="ky">&nbsp;</p>
    <p id="ky7" class="ky">&nbsp;</p>
    <p id="ky8" class="ky">&nbsp;</p>
    <p id="svl">Survol</p>
    </div>

    <style><!--
    #svl{position:absolute; z-index:1; width:8vw; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(50vw,1vw);}
    .kg{position:absolute; z-index:10; width:2vw; height:2vw; border-radius:50%; background:coral;}
    #kg1{transform:translate(57vw,1vw);}
    #kg2{transform:translate(57vw,5vw);}
    #kg3{transform:translate(57vw,9vw);}
    #kg4{transform:translate(57vw,13vw);}
    #kg5{transform:translate(57vw,17vw);}
    #kg6{transform:translate(57vw,21vw);}
    #kg7{transform:translate(57vw,25vw);}
    #kg8{transform:translate(57vw,29vw);}

    .ky{position:absolute; z-index:1; width:60vw; height:34vw; opacity:0; filter:grayscale(1); transform:translate(0vw,0vw); transition:opacity 0s linear 0s, filter 1s linear 1s;}
    #ky1{background:url('http://ekladata.com/k-swdobu9gzxgdM83zWsVGBjwms.jpg'); background-size:60vw 34vw;}
    #ky2{background:url('http://ekladata.com/Ewx1iDmCBQVPqX8KuFwMqN8Lbws.jpg'); background-size:60vw 34vw;}
    #ky3{background:url('http://ekladata.com/nlOImTr4K2dgSpxXWeYqa-khqtY.jpg'); background-size:60vw 34vw;}
    #ky4{background:url('http://ekladata.com/0UAT3x--fqOf2Qpg5afHz37JGSo.jpg'); background-size:60vw 34vw;}
    #ky5{background:url('http://ekladata.com/-IztbxX0AeYXSxDKGVU0UneGPLo.jpg'); background-size:60vw 34vw;}
    #ky6{background:url('http://ekladata.com/-wqFCPgA5qCrdVbGrOQCg03x9wM.jpg'); background-size:60vw 34vw;}
    #ky7{background:url('http://ekladata.com/tAdzZX9eu3EMKV1jE4NOITiDCOM.jpg'); background-size:60vw 34vw;}
    #ky8{background:url('http://ekladata.com/eaEY-mkFaQP3QFDephSLIstY3yM.jpg'); background-size:60vw 34vw;}

    #kg1:hover ~ #ky1,#kg2:hover ~ #ky2,#kg3:hover ~ #ky3,#kg4:hover ~ #ky4,#kg5:hover ~ #ky5,#kg6:hover ~ #ky6,#kg7:hover ~ #ky7,#kg8:hover ~ #ky8{opacity:1; filter:grayscale(0);}
    --></style>