• Variante filtres gimp

     

     

     

     

     

     

     

     

     

    Survolez les images.

     

     

    Code du montage:
    <div style="width: 800px; height: 600px; margin: 10px auto; border: 6px ridge white; background: url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); background-size: cover;">
    <p id="ph1">&nbsp;</p>
    <p id="ph1a">&nbsp;</p>
    <p id="ph2">&nbsp;</p>
    <p id="ph2a">&nbsp;</p>
    <p id="ph3">&nbsp;</p>
    <p id="ph3a">&nbsp;</p>
    <p id="ph4">&nbsp;</p>
    <p id="ph4a">&nbsp;</p>
    <p id="co">Survolez les images.</p>
    </div>

    <style type="text/css"><!--
    #ph1{transition: transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s, border-radius 2s linear 2s, opacity 2s linear 3s; position:absolute; z-index:5; width:250px; height:250px; border:2px solid white; border-radius:50%; transform:translate(50px,25px); background:url('http://ekladata.com/8jkFX23lFkDdwwJAnPjrkeSxFJI/6569f.jpg'); background-size:cover;}
    #ph1a{transition: transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s, border-radius 2s linear 2s, opacity 2s linear 0s; position:absolute; z-index:4; width:250px; height:250px; border-radius:50%; transform:translate(50px,25px); background:url('http://ekladata.com/eucJe5BR2xDUaG-c1Mge1H-9YxA/6569.jpg'); background-size:cover; opacity:0;}
    #ph1:hover{ width:800px; height:600px;border-radius:0%; transform:translate(0px,0px); z-index:7; opacity:0;}
    #ph1:hover ~ #ph1a{ width:800px; height:600px; border-radius:0%; transform:translate(0px,0px); z-index:6; opacity:1;}
    #ph2{transition: transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s, border-radius 2s linear 2s, opacity 2s linear 3s; position:absolute; z-index:5; width:250px; height:250px; border:2px solid white; border-radius:50%; transform:translate(475px,25px); background:url('http://ekladata.com/izK2yNzw7m3nq8hxGw9Er6M4N8U/6578f.jpg'); background-size:cover;}
    #ph2a{transition: transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s, border-radius 2s linear 2s, opacity 2s linear 0s; position:absolute; z-index:4; width:250px; height:250px; border-radius:50%; transform:translate(475px,25px); background:url('http://ekladata.com/9Lfpkzd6n8kVqLWXsApzzGSIKOE/6578.jpg'); background-size:cover; opacity:0;}
    #ph2:hover{ width:800px; height:600px;border-radius:0%; transform:translate(0px,0px); z-index:7; opacity:0;}
    #ph2:hover ~ #ph2a{ width:800px; height:600px; border-radius:0%; transform:translate(0px,0px); z-index:6; opacity:1;}
    #ph3{transition: transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s, border-radius 2s linear 2s, opacity 2s linear 3s; position:absolute; z-index:5; width:250px; height:250px; border:2px solid white; border-radius:50%; transform:translate(50px,325px); background:url('http://ekladata.com/b15gxw3SS-mP5jdh2M0L-PLeJ_k/6583f.jpg'); background-size:cover;}
    #ph3a{transition: transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s, border-radius 2s linear 2s, opacity 2s linear 0s; position:absolute; z-index:4; width:250px; height:250px; border-radius:50%; transform:translate(50px,325px); background:url('http://ekladata.com/YN0B5WAKM9FX_qz8mgW7V9Z3lkk/6583.jpg'); background-size:cover; opacity:0;}
    #ph3:hover{ width:800px; height:600px;border-radius:0%; transform:translate(0px,0px); z-index:7; opacity:0;}
    #ph3:hover ~ #ph3a{ width:800px; height:600px; border-radius:0%; transform:translate(0px,0px); z-index:6; opacity:1;}
    #ph4{transition: transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s, border-radius 2s linear 2s, opacity 2s linear 3s; position:absolute; z-index:5; width:250px; height:250px; border:2px solid white; border-radius:50%; transform:translate(475px,325px); background:url('http://ekladata.com/AKvIdq4kSAZP12a-PyDhodPh5RY/6587f.jpg'); background-size:cover;}
    #ph4a{transition: transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s, border-radius 2s linear 2s, opacity 2s linear 0s; position:absolute; z-index:4; width:250px; height:250px; border-radius:50%; transform:translate(475px,325px); background:url('http://ekladata.com/l2PvDvgfMxWaoVl5Chr-30su1-Q/6587.jpg'); background-size:cover; opacity:0;}
    #ph4:hover{ width:800px; height:600px;border-radius:0%; transform:translate(0px,0px); z-index:7; opacity:0;}
    #ph4:hover ~ #ph4a{ width:800px; height:600px; border-radius:0%; transform:translate(0px,0px); z-index:6; opacity:1;}
    #co{position:absolute; transform:translate(200px,260px); width:400px; text-align:center; font-size:26pt; color:white; text-shadow:1px 1px black;}
    --></style>
    ...
    Les adresses images et le positionnement sont les seuls éléments qui changent d'une image à l'autre.