Add Blur Overlay on Focus

blur-overlay.css

.c-search {
    transition: opacity .5s ease;
    transition: height .75s ease;
    position: absolute;
    display: block;
    z-index: -999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    background: rgba(0,0,0, 0.9);
    opacity: 0;
    text-align: center;

    &.open {
        transition: opacity .5s ease;
        z-index: 9999;
        height: 100%;
        opacity: 1;
    }
}

.c-search__wrapper {
    transition: top .75s ease;
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);

    &.open {
        transition: top .75s ease;
        top: 50%;
    }
}

.page-blur {
    transition: all .75s ease;
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
    -webkit-filter: url(#blur-filter);
    filter: url(#blur-filter);
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

blur-overlay.html

<div class="c-search js-search-form">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="blur-svg">
        <defs>
            <filter id="blur-filter">
                <feGaussianBlur stdDeviation="3"></feGaussianBlur>
            </filter>
        </defs>
    </svg>
    <div class="c-search__wrapper">
        <form action="#" method="get">
            <label class="c-search__title" for="q">Search</label>
            <input placeholder="Keyword Search" class="c-search__search-input form-text" type="text" id="search" name="search" value="" size="30" maxlength="80" data-parsley-id="">
            <button class="form-submit c-search__submit" type="submit" value="">
                <i class="icon-search"></i> <span>Go Find It</span>
            </button>
        </form>
        <span class="c-search__close js-search-btn-close">
            <i class="icon-cancel-circled"></i>
        </span>
    </div>
</div>


<!-- Navigation button to trigger overlay -->

<nav class="c-top-nav">
  <a class="c-search__btn js-search-btn">SEARCH <i class="icon-search"></i></a>
</nav>

blur-overlay.js

(function(app, $, window, document, undefined) {
	'use strict';

	/* Cache Elements
	--------------------------------------------------------------------------- */
	var $searchButton = $('.js-search-btn');
	var $searchForm = $('.js-search-form');
	var $searchButtonClose = $('.js-search-btn-close');
	var $searchWraapper = $('.c-search__wrapper');
	var $pageContainer = $('#page');

	/* Display Search Form
	--------------------------------------------------------------------------- */
	function toggleSearch(e){
		$searchForm.toggleClass('open');
		$searchWraapper.toggleClass('open');
		$pageContainer.toggleClass('page-blur');
	}

	$searchButton.on('click', function(e) {
		toggleSearch();
	});

	$searchButtonClose.on('click', function(e) {
		toggleSearch();
	});

})(window.app = window.app || {}, $, window, document);