Webkit Image Effects with Masks

Today’s article may seem short, but it describes some interesting features of webkit browsers, in particular, the animation of images using masks. I want to warn that these examples will only work in webkit browsers (Chrome and Safari). The idea to study the masks came to me when I saw the Chrome browser logo on a Google website. I liked this effect and I wanted to understand how it works. Well, what is a mask? Basically, it is an image (or gradient) where a transparent part will make your element invisible, non-transparent will make your element visible. These masks are similar to the ones in Photoshop.

To make our examples I used the -webkit-mask property (with different variations). This property is used to set individual mask property values for various elements. Now, please check our little demo (and download our sources), and I will explain how it works.

Live Demo

download the package

Step 1. HTML

Our HTML markup is really easy for today:

<div id="examples">
    <img class="type1" src="images/logo.png" />
    <img class="type2" src="images/logo2.png" />
    <img class="type3" src="images/logo3.png" />
    <img class="type4" src="images/logo4.png" />
</div>

There are only four images. Every image has own unique effect.

Step 2. JS

To make first two effects I had to use custom radial gradients. The main idea is to display expanding radial gradient (in a loop) until it reaches the end of image. It is nearly impossible to change the radial gradient params of -webkit-mask params with onle CSS3 (even using keyframes). This is why I had to use javascript here.

$(document).ready(function(){ 

    $('#examples img').hover(function () {
        var $imgObj = $(this);

        // class name
        var sClass = $(this).attr('class');

        // radius
        var iRad = 0;

        // interval
        var iInt;
        if (iInt) window.clearInterval(iInt);

        // loop until end
        iInt = window.setInterval(function() {
            var iWidth = $imgObj.width();
            var iHalfWidth = iWidth / 2;
            var iHalfHeight = $imgObj.height() / 2;

            if (sClass == 'type1') {
                $imgObj.css('-webkit-mask', '-webkit-gradient(radial, '+iHalfWidth+' '+iHalfHeight+', '+ iRad +', '+iHalfWidth+' '+iHalfHeight+', '+ (iRad + 30) +', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))');
            } else if (sClass == 'type2') {
                $imgObj.css('-webkit-mask', '-webkit-gradient(radial, '+iHalfHeight+' '+iHalfHeight+', '+ iRad +', '+iHalfHeight+' '+iHalfHeight+', '+ (iRad + 30) +', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))');
            }

            // when radius is more than our width - stop loop
            if (iRad > iWidth) {
                window.clearInterval(iInt);
            }

            iRad+=2;
        }, 10);
    });
});

As you see, in the ‘hover’ event handler it increases Radius of radial gradient in a loop

Step 3. CSS

To achieve the effects of another pair of images – it is sufficient to use only CSS3:

.type3 {
    -webkit-mask: url(../images/mask.png) no-repeat center center;
}
.type3:hover{
    -webkit-animation: loop_frames 1s ease-in-out infinite;
     -webkit-animation-direction:alternate;
     -webkit-mask-size: auto 100%;
}
@-webkit-keyframes loop_frames {
     0% { -webkit-mask-size: auto 100%; }
     100% { -webkit-mask-size: auto 70%; }
}

.type4 {
    -webkit-transition: -webkit-mask-position 0.5s ease;
    -webkit-mask-size: 400px 300px;
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.90, rgba(0,0,0,1)), color-stop(1.00, rgba(0,0,0,0)));
    -webkit-mask-position-x: 400px;
}
.type4:hover {
     -webkit-mask-position-x: 0;
}

As you can see, for the third effect we use the -webkit-mask-size property (to simulate some beats), for the fourth – we changed -webkit-mask-position-x param. We change both params using :hover selector (in case if we hover our images).

Live Demo

download the package

Conclusion

That’s all. I’ve just given you several examples of nice image effects using masks. I hope it will be very useful for you!