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.
Best jQuery Blur Effect Plugins & Tutorials with Demo
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 is jQuery plugin used to bring stylish image hover.
- 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 is a jQuery plugin that produces psuedo-transparent blurred elements over other elements.
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.
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).
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).