Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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 )

Problem courtesy of: swordfish

Solution

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.

Solution courtesy of: Chris Fletcher

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×