Как сделать размытие фона? [закрыт]

.wrap { 
  width: 580px; 
  height: 370px; 
  position: relative; 
} 
 
.back { 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  background-image: url(https://i2.guns.ru/forums/icons/forum_pictures/017758/17758172.jpg); 
  background-size: cover; 
  transition: all .5s; 
} 
 
.focus { 
  position: absolute; 
  text-align: ceneter; 
  line-height: 1; 
  font-size: 30px; 
  letter-spacing: 5px; 
  color: white; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  transition: all .5s; 
} 
 
.wrap:hover .back { 
  filter: blur(5px); 
} 
 
.wrap:hover .focus { 
  padding: 1px 5px; 
  background: rgba(0, 0, 0, .5); 
  font-size: 45px; 
}

<div class="wrap"> 
  <div class="back"></div> 
  <div class="focus">Focus</div> 
</div>

focus = document.querySelector('.focus'); 
back = document.querySelector('.back'); 
 
focus.addEventListener('mouseover', blur); 
 
function blur() { 
  back.style.filter = 'blur(5px)'; 
} 
 
focus.addEventListener('mouseout', unblur); 
 
function unblur() { 
  back.style.filter = 'blur(0px)'; 
}

.back { 
  background-image: url('https://cdn.pixabay.com/photo/2015/12/01/20/28/green-1072828_960_720.jpg'); 
} 
.focus { 
    height: 100px; 
}

<div class='back'> 
  <div class='focus'>focus</div> 
</div>