Blur the whole page - Mouse Hover displays circle with inner non blurred
I've mapped out this cool idea for my personal web page.
I essentially just want to blur out the
and everything in it.
And with mouse over -- a circle takes place of the mouse, with the inner non-blurred.
Any simple JS / jQuery or CSS solutions?
It would be cool to easily toggle a zoom for within the circle; but can do without.
(Similar to this photo: http://medialoot.com/images/thumbs/640x440x1_Parallax_Wordpress_Theme_Preview31.jpg )
Just a couple ideas:
This Fiddle does something like you're suggesting: http://jsfiddle.net/jamygolden/CGFBT/2/light/
You would have to modify the hover effect so it only un-blurs the element beneath your Mouse.
For images, you could make a sprite for every image that includes a blurred and focused version that flip-flop when you hover.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here