• Tag en montage

    A partir de la page précédente, on peut regrouper différentes images (originales et contours), de différentes façons, dont celle-ci.
    Survolez les boutons.

     


    <div id="fd"><img id="bt1" src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /> <img id="bt2" src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /> <img id="bt3" src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /> <img id="bt4" src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" />
    <img id="a1" src="http://ekladata.com/-_U_BBqMKNdCo5PmlHGPC4HL_yQ/6250.gif" alt="" /> <img id="a2" src="http://ekladata.com/p7wfWaoFJqLt2PC1T9w6WadSfTA/6254.gif" alt="" /> <img id="a3" src="http://ekladata.com/zImVDyzN9kNvLO2zuORsWW46CRI/6488.gif" alt="" /> <img id="a4" src="http://ekladata.com/6jC59ZRu90Eq-QV6Bm7VtCdPfRc/6493.gif" alt="" />
    <img id="c1" src="http://ekladata.com/qX1lQI52lw29MJFVKSarMNhRm_s/6250.jpg" alt="" /> <img id="c2" src="http://ekladata.com/h8b--TnodRFnl5Byo9ZhWwGqDQg/6254.jpg" alt="" /> <img id="c3" src="http://ekladata.com/1s9yAaR_mWOCL9IML-sp06-wWAs/6488v.jpg" alt="" /> <img id="c4" src="http://ekladata.com/3ESmu-CVS4yciL2Y_cnOHkuYIcY/6493v.jpg" alt="" /></div>
    <style type="text/css"><!--
    #fd{width:800px; height:600px; margin:5px auto; border:6px ridge grey; background:url('http://ekladata.com/V6-SOjH6KiDBOKKtx3Ldp6GkV6s/bricks5.jpg'); background-size:25%;}
    #bt1{position:absolute; z-index:4; transform:translate(750px,20px);}
    #bt2{position:absolute; z-index:4; transform:translate(750px,70px);}
    #bt3{position:absolute; z-index:4; transform:translate(750px,120px);}
    #bt4{position:absolute; z-index:4; transform:translate(750px,170px);}
    #a1{position:absolute; transform:translate(0px,0px);}
    #a2{position:absolute; transform:translate(0px,0px);}
    #a3{position:absolute; transform:translate(0px,0px);}
    #a4{position:absolute; transform:translate(0px,0px);}
    #c1{position:absolute; transform:translate(0px,0px);transition:all 2s linear; opacity:0; z-index:1;}
    #c2{position:absolute; transform:translate(0px,0px);transition:all 2s linear; opacity:0; z-index:1;}
    #c3{position:absolute; transform:translate(0px,0px);transition:all 2s linear; opacity:0; z-index:1;}
    #c4{position:absolute; transform:translate(0px,0px);transition:all 2s linear; opacity:0; z-index:1;}
    #bt1:hover ~ #c1{opacity:1; z-index:2;}
    #bt2:hover ~ #c2{opacity:1; z-index:2;}
    #bt3:hover ~ #c3{opacity:1; z-index:2;}
    #bt4:hover ~ #c4{opacity:1; z-index:2;}
    --></style>
    ...
    Fond avec image en arrière plan (le mur); les boutons à survoler; les images contours, visibles, les unes sur les autres;  les images originales, invisibles au départ et visibles au survol des boutons.
    ...