HTML:
<a class="navbar-brand page-scroll" href="#intro"></a>
CSS:
.navbar-custom .nav li a.navbar-brand {
width: 70px;
height: 62px;
background: url(myimg.png) no-repeat;
background-size: 70px 62px;
display: block;
position: relative;
text-indent: -9999px;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
}
.navbar-custom .nav li a.navbar-brand:hover {
background: url(myimghover.png) no-repeat;
}
The hover effect operates smoothly on all browsers, while the transition effect is currently functioning only in Google Chrome. I have experimented with sprite images and pseudo-element hover, but my transparent background images cause an issue where the "bottom" image remains slightly visible upon hover. Any suggestions?
Appreciate your assistance. Warm regards, J.