/ 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

CodeTea

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

Read More