• Filtres divers

     

    Survolez les 4 coins de cette image.

    Code:
    <div style="width: 800px; margin: 10px auto;"><img id="bt1" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /> <img id="bt2" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /> <img id="bt3" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /> <img id="bt4" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /> <img id="ima" src="http://ekladata.com/8kX9E8n6H4bSuI_zDQ6IlBuyzcQ/16.jpg" alt="" /></div>
    <style><!--
    #bt1{position:absolute; z-index:5; width:100px; height:100px; transform:translate(0px,0px);}
    #bt2{position:absolute; z-index:5; width:100px; height:100px; transform:translate(696px,0px);}
    #bt3{position:absolute; z-index:5; width:100px; height:100px; transform:translate(0px,496px);}
    #bt4{position:absolute; z-index:5; width:100px; height:100px; transform:translate(696px,496px);}
    #ima{transition:all 1s linear;}
    #bt1:hover ~ #ima{filter:grayscale(1); -webkit-filter:grayscale(1);}
    #bt2:hover ~ #ima{filter:sepia(1); -webkit-filter:sepia(1);}
    #bt3:hover ~ #ima{filter:hue-rotate(135deg); -webkit-filter:hue-rotate(135deg);}
    #bt4:hover ~ #ima{filter:invert(0.8) contrast(2); -webkit-filter:invert(0.8) contrast(2);}
    --></style>
    Les images des 4 coins (bt) sont transparentes.