• Une autre formule

    Le clic sur chaque bouton fait changer les 4 images à survoler pour agrandir.

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto; background: url('http://ekladata.com/XM4pm_S_tGPYvB0alyjMHFNM-H8.jpg'); background-size: 60vw 33.75vw;"><input id="clc1" class="clc" type="text" value="clic.photos1" /><input id="clc2" class="clc" type="text" value="clic.photos2" /><input id="clc3" class="clc" type="text" value="clic.photos3" />
    <p id="pc1a" class="pc">&nbsp;</p>
    <p id="pc1b" class="pc">&nbsp;</p>
    <p id="pc1c" class="pc">&nbsp;</p>
    <p id="pc1d" class="pc">&nbsp;</p>
    </div>

    <style><!--
    .clc{position:absolute; z-index:5; width:9vw; text-align:center; font-size:1.5vw; box-shadow:0.3vh 0.3vh 0.6vh black;}
    #clc1{ transform:translate(2vw,2vw);}
    #clc2{ transform:translate(25.5vw,2vw);}
    #clc3{ transform:translate(48vw,2vw);}
    .pc{position:absolute; z-index:1; box-sizing:border-box; width:20vw; height:11.75vw; border:0.6vh ridge white;}
    #pc1a{transform:translate(5vw,6vw); transition:all 1s linear; background:url('http://ekladata.com/P46MsFzu6ylczbid9LSkQCVlqt8.jpg'); background-size:cover;}
    #pc1b{transform:translate(35vw,6vw); transition:all 1s linear; background:url('http://ekladata.com/OQbN9FfMfSrlAo2ADlq26pcLAFs.jpg'); background-size:cover;}
    #pc1c{transform:translate(5vw,20vw); transition:all 1s linear; background:url('http://ekladata.com/FRFN5Iz1Vd0q-4TOWuKEZfseMuw.jpg'); background-size:cover;}
    #pc1d{transform:translate(35vw,20vw);transition:all 1s linear; background:url('http://ekladata.com/oPylF7DCJumfYI20H7MwnjWseSE.jpg'); background-size:cover;}

    #clc2:focus ~ #pc1a{background:url('http://ekladata.com/mtLPxAMYqJpvdRGKuNjsvebVRp0.jpg');background-size:cover;}
    #clc2:focus ~ #pc1b{background:url('http://ekladata.com/MI4Ebee03d_GadvPAgUs3K1s8wo.jpg');background-size:cover;}
    #clc2:focus ~ #pc1c{background:url('http://ekladata.com/ms6H8mtaIoUk6gwB_4Md0PysWk8.jpg');background-size:cover;}
    #clc2:focus ~ #pc1d{background:url('http://ekladata.com/Cv1lFlFi-P9FbvTv1Tm0h97D228.jpg');background-size:cover;}

    #clc3:focus ~ #pc1a{background:url('http://ekladata.com/bW9cAzG53jbd136m6uvE0OJA7ao.jpg');background-size:cover;}
    #clc3:focus ~ #pc1b{background:url('http://ekladata.com/yj0ZS3_XFjg3gQkETYsJeRDQzz4.jpg');background-size:cover;}
    #clc3:focus ~ #pc1c{background:url('http://ekladata.com/37-td4QLV-kVKtlEPYs9RpYES9A.jpg');background-size:cover;}
    #clc3:focus ~ #pc1d{background:url('http://ekladata.com/EH6YeAP_72IjcVqFPXPtVowXWKY.jpg');background-size:cover;}

    #pc1a:hover,#pc1b:hover,#pc1c:hover,#pc1d:hover{z-index:10; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
    --></style>