Image Saturation and Multiply Hoverover Treatment

Upon hover, an image that has a saturation of 0 and a multiplication of a selected color is colorized to its original palette. This image hover treatment is especially unique for its ability to harmonize 'background-blend-mode' and 'filter'.

by Ken Watanabe

HTML

<div class="image-wrap-01">
    <div class="image01">
        <svg>
            <defs>
                <filter id="colorize_brown" color-interpolation-filters="sRGB">
                    <feFlood flood-color="#8E4204" result="A" />
                    <feColorMatrix type="saturate" in="SourceGraphic" values="0" result="B" />
                    <feBlend mode="multiply" in2="B" in="A" />
                </filter>
            </defs>
            <image class="brown" filter="url(#colorize_brown)" x="0" y="0" width="100%" height="100%" xlink:href="http://i59.tinypic.com/1zvwwv9.jpg" />
        </svg>
    </div>
    <p class="caption01">Image 001</p>
</div> <!-- END | image-wrap-01 -->


<div class="image-wrap-02">
    <div class="image02">
        <svg>
            <defs>
                <filter id="colorize_brown" color-interpolation-filters="sRGB">
                    <feFlood flood-color="#8E4204" result="A" />
                    <feColorMatrix type="saturate" in="SourceGraphic" values="0" result="B" />
                    <feBlend mode="multiply" in2="B" in="A" />
                </filter>
            </defs>
            <image class="brown" filter="url(#colorize_brown)" x="0" y="0" width="100%" height="100%" xlink:href="http://i60.tinypic.com/nwzvpx.jpg" />
        </svg>
    </div>
    <p class="caption02">Image 002</p>
</div> <!-- END | image-wrap-02 -->
    
</div> <!-- END | .page -->

CSS

/* PAGE WRAP */


/* IMAGE 01 */
.image-wrap-01 {
    width: 100%;
    height: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
}
.image01, .image01 svg {
    width: 600px;
    height: 400px;
}
.image01 {
    background: url("http://i59.tinypic.com/1zvwwv9.jpg");
    background-size: 600px 400px;
    position: relative;
}

/* IMAGE 02 */
.image-wrap-02 {
    width: 100%;
    height: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
}
.image02, .image02 svg {
    width: 400px;
    height: 600px;
}
.image02 {
    background: url("http://i60.tinypic.com/nwzvpx.jpg");
    background-size: 400px 600px;
    position: relative;
}

/* UNIVERSAL COMMAND */
.image01 svg, .image02 svg {
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
}

/* HOVEROVER */
.brown {
    opacity: 1;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}

.brown:hover {
    opacity: 0;
}

/* IMAGE CAPTIONS */
.caption01 {
    text-align: left;
    font: 13px/17px helvetica;
    color: black;
    width: 600px;
}

.caption02 {
    text-align: right;
    font: 13px/17px helvetica;
    color: black;
    width: 400px;
}