Blur the whole page - Mouse Hover displays circle with inner non blurred

Question

I've mapped out this cool idea for my personal web page.

I essentially just want to blur out the <body> 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 )

Quick question: how long did you google for this / Did you google at all? — jakee, Jun 27 '12 at 14:30
Hrm, perhaps not an exact duplicate after all (the circly thing). Can't unvote to close, though, sorry! — Greg Pettit, Jun 27 '12 at 14:56

score 1 · Accepted Answer · answered Jun 27 '12 at 14:29

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.

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

There have been a couple of topics about this here before and the short answer is "No, not easily and even the hard way won't most likely achieve the effect you are after 100%". I think the mouse hover part will be the pain-in-the ass portion.

Gaussian Blur onHover Using jQuery

Blur effect on the entire webpage this one has some nice links

edited May 23 '17 at 12:12

Community

1
1

answered Jun 27 '12 at 14:29

jakee

18,486
3
37
42

Blur the whole page - Mouse Hover displays circle with inner non blurred

2 Answers2