fade background css

/* Answer to: "css transition opacity" */ /* CSS transitions allows you to change property values smoothly, over a given duration. */ .myClass { vertical-align: top; transition: opacity 0.3s; /* Transition should take 0.3s */ -webkit-transition: opacity 0.3s; /* Transition should take 0.3s */ opacity: 1; /* Set opacity to 1 */ } .myClass:hover { opacity: 0.5; /* On hover, set opacity to 2 */ } /* From `opacity: 1;` to `opacity: 0.5;`, the transition time should take 0.3 seconds as soon as the client starts to hover over the element. */

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>

Posted by: Guest on June-26-2021

Code answers related to "fade background css"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "fade background css"

Code answers related to "fade background css"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us