How to hover a div and make its background-image slowly dissapear without affecting the content that's inside it?

Question

I have a div with a background-color , background-image and some text on it . I want , when i hover the div , the background-image to slowly dissapear, like a transition effect or something, but the text and the color still remain there visible in the div.I am open to any type of method.

Answer 1

You can do this easily using only CSS adding a few DOM elements.

 .fadebg { position: relative; height: 100px; width: 100px; background-color: red; } .fadebg:hover .img, .fadebg:hover img { opacity: 0; } .text { position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: white; z-index: 1; } .img { background-repeat: no-repeat; background-image: url(https://upload.wikimedia.org/wikipedia/en/b/bc/Screenshot_Snarf.jpg); background-size: 100px 100px; } .img, img { opacity: 1; height: 100px; width: 100px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; -webkit-transition: 1s all; -moz-transition: 1s all; -ms-transition: 1s all; -o-transition: 1s all; transition: 1s all; } 

 <div class="fadebg"> <div class="text">Hi</div> <div class="img"></div> </div> <br> <div class="fadebg"> <div class="text">Hi</div> <img src="https://upload.wikimedia.org/wikipedia/en/b/bc/Screenshot_Snarf.jpg"> </div>