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>