delaying the hover of background- image [duplicate] - html

Question

This question already has answers here:
CSS3 background image transition
(13 answers)
Closed 7 years ago.
CSS
.navbar-brand {
display: block;
margin: 0; padding: 0;
height: 80px;
width: 70px;
background: url('img/logo_orig.png') no-repeat center center;
background-size: 100% auto;
}
.navbar-brand:hover {
background: url('img/logo_hov.png') no-repeat center center;
background-size: 100% auto;
}
This creates a button with a background image, when hovered it hnages the background.
I want to add a delay to the background image when hovered. similar to using
transition: background-color 0.35s ease;

Answer 1

You can use something like this.
HTML:
#cf {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#cf img {
position: absolute;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
height:inherit;
width:inherit;
}
#cf img.top:hover {
opacity: 0;
}
<div id="cf">
<img class="bottom" src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg" />
<img class="top" src="http://cdp.pasctunisie.org/wp-content/uploads/2015/05/light-circles-wave-powerpoint-backgrounds.jpg" />
</div>