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>