Hoverover: Multiplied Image to True Image

by Ken Watanabe

HTML

<div id="puppy">
    <svg>
        <defs>
            <filter id="colorize_yellow" color-interpolation-filters="sRGB">
                <feFlood flood-color="#ffecae" result="A"/>
                <feColorMatrix type="saturate" in="SourceGraphic" values="0" result="B"/>
                <feBlend mode="multiply" in2="B" in="A"/>
            </filter>
        </defs>
        <image id="yellow" filter="url(#colorize_yellow)" x="0" y="0" width="100%" height="100%" xlink:href="http://i61.tinypic.com/34xq73a.jpg"/>
    </svg>
</div>

CSS

#puppy {
    background: url('http://i61.tinypic.com/34xq73a.jpg');
    background-size: 639px 429px;
    position: relative;
}
#puppy svg {
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
}
#puppy, #puppy svg {
    height: 429px;
    width: 639px;
}
#yellow {
    opacity: 0;
}
#yellow:hover {
    opacity: 1;
}