• Deux principes

    Survolez les deux montages.

    Code:
    <p style="width:800px; height:600px; border:1px solid black; background:url('http://ekladata.com/dDxxhW1ESNdj1I-HSLGNwkWRBBw/6561.jpg');">
    <img id="ft" src="http://ekladata.com/XK9VeldnOGZZ8kJhPQ_nrLYxa5Q/6561f.jpg">
    </p>
    <style type="text/css"><!--
    #ft{transition:all 2s linear; opacity:1;}
    #ft:hover{opacity:0;}
    --></style>

    Dans ce montage:
    2 images opaques (jpg) dont l'une devient transparent au survol.

     


    Code:
    <p style="width: 800px; height: 600px; float: left; border: 1px solid black; background: url('http://ekladata.com/SY8wPCI-eQsPw0J9Ab9e9o6IUPk/img895.jpg');"><img id="ft2" src="http://ekladata.com/1NM8XpkJ0XdJvS8XXodAxbHFdLU/6563ft.gif" alt="" /><img id="ft1" src="http://ekladata.com/iBTAVRVU0ltJPWsI91wJ_SQkQW4/6563.jpg" alt="" /></p>
    <style type="text/css"><!--
    #ft1{transition:all 2s linear; position:absolute; z-index:1; transform:translate(0px,0px); opacity:0;}
    #ft2{transition:all 2s linear 1s; position:absolute; z-index:2; transform:translate(0px,0px); opacity:1;}
    #ft2:hover{opacity:0;}
    #ft2:hover ~ #ft1{opacity:1;}
    --></style>

    Dans ce montage:
    Une image en fond de cadre (texture)
    L'image opaque colorée et transparente: ft1.
    L'image visible, au format Gif, dont on ne voit que les traits, visible sur la texture: ft2. 
    Le survol de cette dernière image rend l'image colorée,  placée en dessous, opaque.
    Le principe de ce code est de toujours écrire la ligne de l'élément survolé (ft2) avant l'élément animé (ft1).