Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Create a blurry effect.
*[data-blur-background] {
position: relative;
overflow: hidden;
z-index: 1;
}
*[data-blur-background]::before, *[data-blur-background]::after {
position: absolute;
display: block;
z-index: -1;
content: ' ';
}
*[data-blur-background]::before {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
*[data-blur-background]::after {
background: rgba(255, 255, 255, .5);
top: 0;
right: 0;
bottom: 0;
left: 0;
}
jQuery(document).ready(function ($) {
'use strict';
$('[data-blur-background]').each(function (i, content) {
var source = $(content).addClass('blur-id-' + i).data('blur-background'),
$style = $('<style>').appendTo('head'),
blur = function () {
var top = $(source).offset().top - $(content).offset().top,
left = $(source).offset().left - $(content).offset().left,
css = '.blur-id-' + i + '::before { width: ' + $(source).css('width') + '; height: ' + $(source).css('height') + '; background: ' + $(source).css('background') + '; top: ' + top + 'px; left: ' + left + 'px; }';
$style.text(css);
};
blur();
$(window).resize(blur);
});
});
@WebMaestroFr

This comment has been minimized.

Copy link
Owner Author

WebMaestroFr commented Dec 10, 2014

<div data-blur-background="#my-background-container">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.