• 05/10/2023

    1 + 5 images au ratio 16/9, en 1100x619px.

    Clic sur le bouton pour faire apparaître les images puis les survoler.

     

     

     

     

     


    <div style="position: relative; width: 1100px; height: 619px; margin: 30px auto; text-align: left; background: url('http://ekladata.com/qAgniR8FxvAbklLz6i5OudcUlFE.jpg'); background-size: cover; border: 1px solid black;"><input id="cc" type="text" value="CLIC" />
    <p id="per1" class="per">&nbsp;</p>
    <p id="per2" class="per">&nbsp;</p>
    <p id="per3" class="per">&nbsp;</p>
    <p id="per4" class="per">&nbsp;</p>
    <p id="per5" class="per">&nbsp;</p>
    </div>
    <style><!--
    #cc{position:absolute; z-index:10; width:60px; border-radius:10px; background:pink; font-size:25px; text-align:center; transform:translate(500px,0px);}
    .per{position:absolute; width:1100px; height:50px; border:4px ridge white; transition:opacity 0s,height 1s, transform 1s;}
    #per1{box-sizing:border-box; background-position:0px -100px; transform:translate(0px,100px); opacity:0; background:url('http://ekladata.com/dhwInewo9GbdULgrAkFwtc_X52Y.jpg');background-size:1100px 619px;}
    #per2{box-sizing:border-box; background-position:0px -200px; transform:translate(0px,200px); opacity:0; background:url('http://ekladata.com/NfqOGA9F69-j9WVhY7Tkxipxp0g.jpg');background-size:1100px 619px;}
    #per3{box-sizing:border-box; background-position:0px -300px; transform:translate(0px,300px); opacity:0; background:url('http://ekladata.com/Cu6iiIlVaP6-rdDJty5KVLNfkM8.jpg');background-size:1100px 619px;}
    #per4{box-sizing:border-box; background-position:0px -400px; transform:translate(0px,400px); opacity:0; background:url('http://ekladata.com/yfBKrmuu-ZqxLyr2w-W-nbVeYx0.jpg');background-size:1100px 619px;}
    #per5{box-sizing:border-box; background-position:0px -500px; transform:translate(0px,500px); opacity:0; background:url('http://ekladata.com/HZH0BNs6Bh-OE7XbJ1Veh9orObo.jpg');background-size:1100px 619px;}
    #cc:focus ~ #per1,#cc:focus ~ #per2,#cc:focus ~ #per3,#cc:focus ~ #per4,#cc:focus ~ #per5{opacity:1;}
    #per1:hover,#per2:hover,#per3:hover,#per4:hover,#per5:hover{z-index:5; width:1100px; height:619px; transform:translate(0px,0px);}
    --></style>