Sepia Blur Experiment

Playing around with the idea of using filters to hide unimportant items on hover.

by Travis Almand

HTML

<div class='container'>
    <div class='image'></div>
    <div class='content bigblur'>
        <h2>headline</h2>
        <p>copy</p>
        <button>Button</button
    </div>
</div>

CSS

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}
.container {
    height: 100%;
    position: relative;
    width: 100%;
}
.image {
    background-image: url(http://lorempixel.com/512/512/);
    background-size: cover;
    left: 0;
    height: 100%;
    position: absolute;
    top: 0;
    transition: filter 2s;
    width: 100%;
}
.content {
    color: white;
    position: relative;
    margin: auto;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 75%;
}
.blur {
    filter: blur(10px) sepia(100%);
    transition: filter 0.5s;
}

JavaScript

$('button').on('mouseover', function () {
    $('.image').addClass('blur');
}).on('mouseout', function () {
    $('.image').removeClass('blur');
});