Image Animation Effects With Masks

 An interesting jquery plugin that adds animation effects to your images with masks. Please note that this effect only works in Webkit browsers like chrome and safari.

How to use it:

1.  Include jQuery library in your head

<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>

2. Markup

<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>

3. Javascript

$(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);
    }); 
});

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.