css background image fade

1<script>
2  function change_opacity(opacity){
3  document.getElementById('bg-img').style.opacity=opacity
4}
5</script>
6<style>
7  #wrapper{
8  width:500px;
9  height:350px;
10  margin:auto;
11   background-opacity:.5;
12  position:relative;
13}
14
15#bg-img{
16  position:absolute;
17    background-image:url(https://www.citynews1130.com/wp-content/blogs.dir/sites/9/2017/06/05/cat.jpg);
18  background-size: cover;
19  top:0;
20  left:0;
21  right:0;
22  bottom:0; 
23  transition-duration:.5s
24}
25
26button{
27  position:absolute;
28  z-index:2;
29  top:50%;  
30}
31
32#b1{
33  left:10%;
34}
35
36#b2 {
37  right:10%;
38}
39</style>
40
41
42<div id='wrapper'>
43  <button onclick='change_opacity(1)' id='b1'>Click here to fade in</button>
44  <div id='bg-img'></div>
45  <button onclick='change_opacity(0)' id='b2'>Click here to fade in</button>
46
47</div>