<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.background {
position: relative;
width: 100%;
height: 100vh;
background-image: url("https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=707&q=80");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.blur {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-image: url("https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=707&q=80");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
filter: blur(10px);
transition: filter .5s ease;
backface-visibility: hidden;
}
.background:hover .blur {
filter: blur(0);