Answers for "fade background image css"

image blur css

filter: blur(8px);
  -webkit-filter: blur(8px);

css background image fade

<script>
  function change_opacity(opacity){
  document.getElementById('bg-img').style.opacity=opacity
}
</script>
<style>
  #wrapper{
  width:500px;
  height:350px;
  margin:auto;
   background-opacity:.5;
  position:relative;
}

#bg-img{
  position:absolute;
    background-image:url(https://www.citynews1130.com/wp-content/blogs.dir/sites/9/2017/06/05/cat.jpg);
  background-size: cover;
  top:0;
  left:0;
  right:0;
  bottom:0; 
  transition-duration:.5s
}

button{
  position:absolute;
  z-index:2;
  top:50%;  
}

#b1{
  left:10%;
}

#b2 {
  right:10%;
}
</style>


<div id='wrapper'>
  <button onclick='change_opacity(1)' id='b1'>Click here to fade in</button>
  <div id='bg-img'></div>
  <button onclick='change_opacity(0)' id='b2'>Click here to fade in</button>

</div>