• Montage diapo filtre

    Pour une fois, j'ai d'abord publié un article, selon ce code, que j'ai ensuite recopié pour cette page.

    Il faut, pour chaque image, une version photo originale, ici au format 800x600px et, au même format, une version modifiée, ici grâce au logiciel the Gimp.

    Ce qui rend le code assez long mais très répétitif. Survolez les vignettes.

     

     

     

     

     

     

     

     

     

     

     

     

     


    Code du montage:
    <div style="width: 800px; height: 600px; margin: 10px auto; border: 1px solid black; background: url('http://ekladata.com/AHhv6xStUIreQonx5ATb-mDlvh0/00018.jpg'); background-size: cover;">
    <div id="c1">
    <p id="p2">&nbsp;</p>
    <p id="p1">&nbsp;</p>
    </div>
    <div id="c2">
    <p id="p4">&nbsp;</p>
    <p id="p3">&nbsp;</p>
    </div>
    <div id="c3">
    <p id="p6">&nbsp;</p>
    <p id="p5">&nbsp;</p>
    </div>
    <div id="c4">
    <p id="p8">&nbsp;</p>
    <p id="p7">&nbsp;</p>
    </div>
    <div id="c5">
    <p id="p10">&nbsp;</p>
    <p id="p9">&nbsp;</p>
    </div>
    <div id="c6">
    <p id="p12">&nbsp;</p>
    <p id="p11">&nbsp;</p>
    </div>
    </div>
    <style type="text/css"><!--
    #c1{ position:absolute; z-index:1; width: 100px; height: 300px; transform:translate(0px,0px);}
    #p1{ transition:width 2s linear 0s, height 2s linear 0s; position:absolute; z-index:1; width:100px; height:300px; background:url('http://ekladata.com/HGooR4lq83EHiXR9mdDyHN9q3q8/6574.jpg');}
    #p2{ transition:width 2s linear 0s, height 2s linear 0s,opacity 2s linear 2s; width:100px; height:300px; position:absolute; z-index:2; opacity:1; background:url('http://ekladata.com/e_TrK3JzgnZmXAVPA4UholLrjd4/6574f.jpg');}
    #c1:hover{z-index:10;}
    #p2:hover{width:800px; height:600px; opacity:0;}
    #p2:hover ~ #p1{width:800px; height:600px;}
    #c2{ position:absolute; z-index:1; width: 100px; height: 300px; transform:translate(0px,300px);}
    #p3{ transition: transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s; position:absolute; z-index:1; width:100px; height:300px; background:url('http://ekladata.com/_KdyJ2PisadQDEQJTA0NGlGNYxM/6577.jpg');}
    #p4{ transition:transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s, opacity 2s linear 2s; width:100px; height:300px; position:absolute; z-index:2; opacity:1; background:url('http://ekladata.com/8L4jPb3jfAmNBUcwrRbWmzXXhuI/6577f.jpg');}
    #c2:hover{z-index:10;}
    #p4:hover{width:800px; height:600px; opacity:0; transform:translate(0px,-300px);}
    #p4:hover ~ #p3{width:800px; height:600px;transform:translate(0px,-300px);}
    #c3{ position:absolute; z-index:1; width: 100px; height: 300px; transform:translate(350px,0px);}
    #p5{ transition:transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s; position:absolute; z-index:1; width:100px; height:300px; background:url('http://ekladata.com/BeoQCG0oU3dreGU4naW7XYrW_JY/6591.jpg');}
    #p6{ transition:transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s,opacity 2s linear 2s; width:100px; height:300px; position:absolute; z-index:2; opacity:1; background:url('http://ekladata.com/AJOJlb2oJcdIhuPD1gFQFO3gJOs/6591f.jpg');}
    #c3:hover{z-index:10;}
    #p6:hover{width:800px; height:600px; opacity:0; transform:translate(-350px,0px);}
    #p6:hover ~ #p5{width:800px; height:600px; transform:translate(-350px,0px);}
    #c4{ position:absolute; z-index:1; width: 100px; height: 300px; transform:translate(350px,300px);}
    #p7{ transition: transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s; position:absolute; z-index:1; width:100px; height:300px; background:url('http://ekladata.com/f-oQOxmNZzJNkJLAl7XdM4u8RBI/6598.jpg');}
    #p8{ transition:transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s, opacity 2s linear 2s; width:100px; height:300px; position:absolute; z-index:2; opacity:1; background:url('http://ekladata.com/ZwhwievBcmVQw7SocwI-LQ7G90c/6598f.jpg');}
    #c4:hover{z-index:10;}
    #p8:hover{width:800px; height:600px; opacity:0; transform:translate(-350px,-300px);}
    #p8:hover ~ #p7{width:800px; height:600px;transform:translate(-350px,-300px);}
    #c5{ position:absolute; z-index:1; width: 100px; height: 300px; transform:translate(700px,0px);}
    #p9{ transition:transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s; position:absolute; z-index:1; width:100px; height:300px; background:url('http://ekladata.com/-r2A9UekmQ-awheuORFyzc_v2jA/6603.jpg');}
    #p10{ transition:transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s,opacity 2s linear 2s; width:100px; height:300px; position:absolute; z-index:2; opacity:1; background:url('http://ekladata.com/vZVfFlE99UK6aCNiTpUIEnwel0s/6603f.jpg');}
    #c5:hover{z-index:10;}
    #p10:hover{width:800px; height:600px; opacity:0; transform:translate(-700px,0px);}
    #p10:hover ~ #p9{width:800px; height:600px; transform:translate(-700px,0px);}
    #c6{ position:absolute; z-index:1; width: 100px; height: 300px; transform:translate(700px,300px);}
    #p11{ transition: transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s; position:absolute; z-index:1; width:100px; height:300px; background:url('http://ekladata.com/lMuzr-TJ2MpgBR-BnjR7m2lqBUw/6606.jpg');}
    #p12{ transition:transform 2s linear 0s, width 2s linear 0s, height 2s linear 0s, opacity 2s linear 2s; width:100px; height:300px; position:absolute; z-index:2; opacity:1; background:url('http://ekladata.com/IKwoGwSCAVHUIoiGAFUVTy27L7g/6606f.jpg');}
    #c6:hover{z-index:10;}
    #p12:hover{width:800px; height:600px; opacity:0; transform:translate(-700px,-300px);}
    #p12:hover ~ #p11{width:800px; height:600px;transform:translate(-700px,-300px);}
    --></style>
    ...
    Pour réaliser cette page, j'ai simplement remplacé les adresses images et fond; si vous voulez tenter l'expérience...