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; 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>
background-imageis not an animatable property (yet). You may need to rethink here.