• Exemple 78

     1+8 images en 1152x648px, au ratio 16/9; celle du fond est reprise pas the Gimp en déformation; les autres pssent du noir et blanc à la couleru par un code CSS.

    Survol

     

     

     

     

     

     

     

     

    <div style="width: 1152px; height: 648px; margin: 5px auto; text-align: left; border: 2px solid black; background: url('http://ekladata.com/cqd2Il8sIu2gavAzE1PG2CL2qzI.jpg'); background-size: 1152px 648px;">
    <p id="gp0">Survol</p>
    <p id="gp1" class="gp">&nbsp;</p>
    <p id="gp2" class="gp">&nbsp;</p>
    <p id="gp3" class="gp">&nbsp;</p>
    <p id="gp4" class="gp">&nbsp;</p>
    <p id="gp5" class="gp">&nbsp;</p>
    <p id="gp6" class="gp">&nbsp;</p>
    <p id="gp7" class="gp">&nbsp;</p>
    <p id="gp8" class="gp">&nbsp;</p>
    </div>
    <style><!--
    #gp0{position:absolute; z-index:1; width:120px; transform:translate(520px,10px); font-size:30px; color:coral; text-shadow:2px 2px black;}
    .gp{position:absolute; z-index:1; width:250px; height:150px; border:6px ridge white; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, border-radius 1s linear 0s, filter 1s linear 1s;}
    #gp1{box-sizing:border-box; background:url('http://ekladata.com/B8q_rmyjSwVCOXvsx1_LSXReLAI.jpg'); transform:translate(76px,50px); border-top-left-radius:50%;}
    #gp2{box-sizing:border-box; background:url('http://ekladata.com/s6RThld71S7USNnNWTqyvUfyFEI.jpg'); transform:translate(326px,50px);}
    #gp3{box-sizing:border-box; background:url('http://ekladata.com/B1HqTY6dphOAimFQSZN2BGSN8y8.jpg'); transform:translate(576px,50px);}
    #gp4{box-sizing:border-box; background:url('http://ekladata.com/rHe8XR0-r-H3P8mvl9Q1n5Hr88g.jpg'); transform:translate(826px,50px); border-top-right-radius:50%;}
    #gp5{box-sizing:border-box; background:url('http://ekladata.com/KG-foeS57-ZoMDn6zuFDpxee9N4.jpg'); transform:translate(76px,200px); border-bottom-left-radius:50%;}
    #gp6{box-sizing:border-box; background:url('http://ekladata.com/bcLZ_O9jJSjOP10ThvNKPqvkB58.jpg'); transform:translate(326px,200px);}
    #gp7{box-sizing:border-box; background:url('http://ekladata.com/usVJGjV1lZQTbnPtt16aKGsDnlk.jpg'); transform:translate(576px,200px);}
    #gp8{box-sizing:border-box; background:url('http://ekladata.com/UvXyaPPISKzszfZEouBeOHzSzvM.jpg'); transform:translate(826px,200px); border-bottom-right-radius:50%;}
    #gp1:hover,#gp2:hover,#gp3:hover,#gp4:hover,#gp5:hover,#gp6:hover,#gp7:hover,#gp8:hover{z-index:5; width:1152px; height:648px; transform:translate(0px,0px); filter:grayscale(0); border-radius:0%;}
    --></style>