Best jQuery Blur Effect Plugins & Tutorials with Demo

jQuery.fluxoModal : jQuery plugin similar to Lightbox

jQuery.fluxoModal : jQuery plugin similar to Lightbox

jQuery.fluxoModal is a jQuery plug-in similar to lightbox. It can highlight any kind of html element inside an html modal window, blurring the background using html5 canvas, CSS3 animations and a crossbrowser fallback for IE.

Avgrund : A JS/CSS3 modal UI concept

Avgrund : A JS/CSS3 modal UI concept

A modal concept which aims to give a sense of depth between the page and modal layers.Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of it, not intended for any practical use.

Picanim – jQuery image hover effect pulgin

Picanim - jQuery image hover effect pulgin

Picanim is jQuery plugin used to bring stylish image hover.

Features:

  • 27+ unique hover effects
  • include: such as grayscale blur transparent fadeIn slice fold boxRandom boxRandom boxDiagional…
  • small size,just 3kb after gziped
  • cross browser
  • you can easliy config the effect with a lot of options
  • also support the img tag with a specific width or height
  • easy to use
  • can show tooltip on image
  • with mouseout reverse effect

blur.js : jQuery psuedo-transparent Blurred Elements

blur.js : jQuery psuedo-transparent Blurred Elements

blur.js is a jQuery plugin that produces psuedo-transparent blurred elements over other elements.

Pixastic: JavaScript Image Processing Library

Pixastic: JavaScript Image Processing Library

Pixastic is an image processing library written in JavaScript. It uses the HTML5 Canvas element to apply effects such as blur, hue/saturation adjustment, emboss, invert, flip, etc.Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more.

Hoverizr : A responsive jQuery Image manipulation and overlay plugin

Hoverizr : A responsive jQuery Image manipulation and overlay plugin with Demo

Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. Currently, it features three effects: grayscale, blur and color inversion. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one.Hoverizr takes advantage of the <canvas> element to do all the image processing.

Easily animate box shadows in jQuery

jQuery box shadows animation

With this jQuery plugin, you can extend the animate function to support the CSS box shadow-property. You can animate the color, the x- and y-offset, the blur-radius and spread-radius. Mark Carver contributed code to support rgba-colors (the alpha channel).

Item Blur Effect with CSS3 and jQuery

jQuery css3 Blur Effect

Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item.

We’ll be using CSS3 transitions and some jQuery to apply the respective classes. Since CSS3 transitions are not supported in order browsers, the demo should be best viewed in Safari or Chrome (here we got the smoothest transitions).