delaying the hover of background- image <p>CSS</p> <pre><code>.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; } </code></pre> <p>This creates a button with a background image, when hovered it hnages the background.</p> <p>I want to add a delay to the background image when hovered. similar to using </p> <pre><code>transition: background-color 0.35s ease; </code></pre>