• noisette

    Voici le code d'un article publié, modifié en pixels et aux dimensions habituelles de cette fidèle visiteuse.

    Clic sur le bouton pour faire apparaître 8 images.
    Survol de chaque image pour l'agrandir.

     

     

     

     

     

     

     

     


    <div style="width: 1150px; height: 647px; margin: 5px auto; border: 6px ridge white; background: url('http://ekladata.com/YKb0ll8Oo7D1qy7y_r1icDM4o0A.jpg'); background-size: 1150px 647px;"><input id="cond1" class="cond" type="text" />
    <p id="com">Clic sur le bouton pour faire appara&icirc;tre 8 images.<br />Survol de chaque image pour l'agrandir.</p>
    <p id="cond3" class="cd">&nbsp;</p>
    <p id="cond4" class="cd">&nbsp;</p>
    <p id="cond5" class="cd">&nbsp;</p>
    <p id="cond6" class="cd">&nbsp;</p>
    <p id="cond7" class="cd">&nbsp;</p>
    <p id="cond8" class="cd">&nbsp;</p>
    <p id="cond9" class="cd">&nbsp;</p>
    <p id="cond10" class="cd">&nbsp;</p>
    </div>
    <hr>
    <p>...</p>
    <style><!--
    .cond{position:absolute; z-index:20; width:30px; height:30px; border-radius:50%; background:pink; box-shadow:inset 3px 3px 6px black, inset -3px -3px 6px white;}
    #cond1{transform:translate(1100px,20px);}
    #com{position:absolute; z-index:1; width:800px; text-align:center; font-size:30px; color:white; text-shadow:1px 1px black; transform:translate(100px,20px);}
    .cd{border-radius:50%; opacity:0; transition:all 1s linear; box-shadow:inset 3px 3px 6px black, inset -3px -3px 6px white;}
    #cond3{position:absolute; z-index:5; width:150px; height:150px; background:url('http://ekladata.com/OdSO-J2ewEmWDp_0RbNmtxdVkSo.jpg'); background-size:1150px 647px; background-position:50% 50%; transform:translate(100px,150px);}
    #cond4{position:absolute; z-index:5; width:150px; height:150px; background:url('http://ekladata.com/b1N7wy8vCJXhRJTXEHzVW_wl14A.jpg'); background-size:1150px 647px; background-position:50% 50%; transform:translate(300px,150px);}
    #cond5{position:absolute; z-index:5; width:150px; height:150px; background:url('http://ekladata.com/XLaqWJFfXGywpsGXDBBVo44dVx8.jpg'); background-size:1150px 647px; background-position:50% 50%; transform:translate(500px,150px);}
    #cond6{position:absolute; z-index:5; width:150px; height:150px; background:url('http://ekladata.com/6CIU9T48LkRto5NNEK0wT2qi6NQ.jpg'); background-size:1150px 647px; background-position:50% 50%; transform:translate(700px,150px);}
    #cond7{position:absolute; z-index:5; width:150px; height:150px; background:url('http://ekladata.com/7cBUAv5kdyaTWhEDPoNKvXW8Jis.jpg'); background-size:1150px 647px; background-position:50% 50%; transform:translate(100px,400px);}
    #cond8{position:absolute; z-index:5; width:150px; height:150px; background:url('http://ekladata.com/TOIVDVZv7N_Jt-rwGG_dQfApFyI.jpg'); background-size:1150px 647px; background-position:50% 50%; transform:translate(300px,400px);}
    #cond9{position:absolute; z-index:5; width:150px; height:150px; background:url('http://ekladata.com/OIUJSswCKUjScJCuA57aypjBJU4.jpg'); background-size:1150px 647px; background-position:50% 50%; transform:translate(500px,400px);}
    #cond10{position:absolute; z-index:5; width:150px; height:150px; background:url('http://ekladata.com/31vKNl_87VaF9Ad4dNbQn4EjMT4.jpg'); background-size:1150px 647px; background-position:50% 50%; transform:translate(700px,400px);}

    #cond1:focus ~ #cond3,#cond1:focus ~ #cond4,#cond1:focus ~ #cond5,#cond1:focus ~ #cond6, #cond1:focus ~ #cond7,#cond1:focus ~ #cond8,#cond1:focus ~ #cond9,#cond1:focus ~ #cond10{opacity:1;}

    #cond3:hover,#cond4:hover, #cond5:hover, #cond6:hover,#cond7:hover,#cond8:hover, #cond9:hover, #cond10:hover{position:absolute; z-index:19; width:1150px; height:647px; border-radius:0%; box-shadow:none; transform:translate(0px,0px);}
    --></style>


    Vos images devront être au ration 16/9 pour ne pas être déformées, mais leur dimension importe peu:; remplacez mes adresses par les vôtres.

    Elles sont dimensionnées à la taille 1150x647px automatiquement.

     

    Leur positionnement et leur forme peuvent être modifiés selon vos goûts, de même que leur nombre, en ajoutant des lignes de code.