html - delaying the hover of background- image -


this question has answer here:

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 button background image, when hovered hnages background.

i want add delay background image when hovered. similar using 

transition: background-color 0.35s ease;

you can use 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>


-

Comments

Post a Comment