Implementing a method detailed here to achieve a fading effect on a background image when hovering over an element.
Check out my example on CodePen: http://codepen.io/anon/pen/vqtjf
HTML:
<div><span></span></div>
CSS:
div {
position: relative;
width: 219px;
height: 218px;
background: url(https://dl.dropboxusercontent.com/u/3454522/home-option-icon-off.png) no-repeat;
}
span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(https://dl.dropboxusercontent.com/u/3454522/home-option-icon-energy.png) no-repeat;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
div:hover span {
opacity: 1;
}
In Firefox (Mac), I encounter a challenge where the background image of the span is misaligned with the parent background, causing a slight movement during the fade-in effect (vertically in the codepen example, but potentially horizontally in a more complex project setup). Resizing the browser window seems to temporarily resolve this issue.
Watch a screencast demonstrating the problem here: (View at 100% for a clear view of the subtle issue).
Any insights into what might be causing this discrepancy or suggestions for fixing it?