Edit in JSFiddle

/*

 tiltShift.js

 Demo: http://www.noeltock.com/tilt-shift-css3-jquery-plugin/
 Download:
 License: GPL GNU (http://www.gnu.org/licenses/)

 */

(function($) {

    $.fn.tiltShift = function(options) {

        $(this).each(function(){

            // Settings

            var s_position = $(this).data('position');
            var s_blur = $(this).data('blur');
            var s_focus = $(this).data('focus');
            var s_falloff = $(this).data('falloff');
            var s_direction = $(this).data('direction');

            // Setup DOM around Image (ugly but flexible)

            $(this).wrap('<div class="tiltshift-wrap" />');
            $(this).parent().prepend('<div class="tiltshift-before tiltshift-layer"></div>');
            $(this).parent().append('<div class="tiltshift-after tiltshift-layer"></div>');

            // Grab original image and assign to before & after

            var src = $(this).attr("src");
            $(this).parent().find('.tiltshift-layer').css('background-image', 'url(' + src + ')');

            // Set Blur

            $(this).parent().find('.tiltshift-layer').css({
                '-webkit-filter': 'blur(' + s_blur + 'px)'
            });

            // Calculate Focus Boundaries (impacted by inFocus value)

            var beforeEnd = ( s_position - ( s_focus / 2 ) ) / 100;
            var afterEnd = ( ( 100 - s_position ) - ( s_focus / 2 ) ) / 100;

            // Calculate Falloff Breakpoints (impacted by tightness value)

            var beforeFall = ( ( beforeEnd ) - ( s_falloff / 100 ) ).toFixed(2);
            var afterFall = ( ( afterEnd ) - ( s_falloff / 100 ) ).toFixed(2);

            // Set directional variables

            if ( s_direction == 'y' ) {
                var beforeDirection = 'left top, left bottom';
                var afterDirection = 'left bottom, left top';
            } else {
                var beforeDirection = 'left top, right top';
                var afterDirection = 'right top, left top';
            }

            // Apply Gradient Mask to Image Layers

            $(this).parent().find('.tiltshift-before').css({
                '-webkit-mask-image' : '-webkit-gradient(linear, ' + beforeDirection + ', color-stop(0, rgba(0,0,0,1)), color-stop(' + beforeFall + ', rgba(0,0,0,1)), color-stop(' + beforeEnd + ', rgba(0,0,0,0)))'
            });

            $(this).parent().find('.tiltshift-after').css({
                '-webkit-mask-image' : '-webkit-gradient(linear, ' + afterDirection + ', color-stop(0, rgba(0,0,0,1)), color-stop(' + afterFall + ', rgba(0,0,0,1)), color-stop(' + afterEnd + ', rgba(0,0,0,0)))'
            });

        });

    };

})(jQuery);
  $('.tiltshift').tiltShift();

.frame {
    position:relative;
    width:500px;
    height:350px;
    margin:20px 40px 20px 0;
}

.tiltshift-layer {
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    opacity:1;
    cursor:pointer;
    cussor:hand;
}

.frame:hover .tiltshift-layer {
    opacity:0;
}


.tiltshift-wrap {
    display:inline-block;
    position:relative;
    overflow:hidden;
}

.tiltshift-layer {
    position:absolute;
    overflow:hidden;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-repeat:no-repeat;
    background-position:0 0;
}

<div class="frame">

            <div id="hover"></div>

            <img src="http://placekitten.com/400/300" class="tiltshift" data-position="56" data-blur="2" data-focus="5" data-falloff="15" data-direction="y" />

        </div>