/ Popup

Pop-Up With Blurred Background Animation

Pop-Up With Blurred Background Animation

Pop-Up With Blurred Background Animation

Here’s a popup that appears while blurring out the body underneath. click the ‘X’ close on the popup and the blur transition back while the popup fades off. Suitable for sites that may want a nag (perhaps for donation or subscription services) or could be re-purposed as a general modal or lightbox.

Uses CSS3 Filter (for blur) and CSS3 Animation for blur transitions. The jQuery is minimal in this iteration, simply used to fade in the pop-up and add and remove the CSS3 classes for blurring.

Made with

Html
Css
Javascript

Author

Benjamin Dalton

Demo

See the Pen Pop-up with blurred background animation by Benjamin Dalton (@jaeming) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More