JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background">
    <div class="tile">
        <div class="blur"><div></div></div>
        <span>Slider</span>
    </div>
</div>

CSS

.background {
    background-image: url('http://i.imgur.com/Tff6JXx.jpg?1?5492');
    background-size: cover;
    height: 600px;
    padding: 10%;
    box-sizing: border-box;
}
.tile {
    position: relative;
    width: 100%;
    height: 100%;
}
.blur {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: black;
}
.blur > div {
    background-image: url('http://i.imgur.com/Tff6JXx.jpg?1?5492');
    background-size: cover;
    -webkit-filter: blur(15px);
    opacity: 0.8;
    position: absolute;
    top: 0;
    bottom: 0;
}

.tile,
.blur > div {
    -webkit-transition: -webkit-transform 3s;
}
.tile {
    -webkit-transform: translate3d(-400px, 0px, 0px);
}
.blur > div {
    -webkit-transform: translate3d(400px, 0px, 0px);
}
.tile:hover {
    -webkit-transform: translate3d(400px, 0px, 0px);
}
.tile:hover .blur > div {
    -webkit-transform: translate3d(-400px, 0px, 0px);
}
}

JavaScript

$(window).resize(function() {
    var left = ($('.background').innerWidth() - $('.tile').width()) / 2;
    var top = ($('.background').innerHeight() - $('.tile').height()) / 2;
    $('.blur div').css('left', -left).css('top', -top).width($('.background').innerWidth()).height($('.background').innerHeight());
}).resize();