title: CSS3 transition doesn't work in Firefox, Safari and IE
body: <p>I was playing with image swap hover effect with CSS3 transitions. Unfortunately, it only works in Chrome. I have seen lots of examples from CSS3 transition that works flawless in Chrome, Firefox and Safari, but not this time... :(
  Where is the problem?</p>
  
  <p><a href="http://jsfiddle.net/kYZ9Y/" rel="nofollow">http://jsfiddle.net/kYZ9Y/</a></p>
  
  <pre><code>.logo {
  float: left;
  z-index: 1;
  width: 325px;
  height: 73px;
  background: url(../img/logo.png) no-repeat;
  position: absolute;
  -moz-transition: all .4s ease;
  -webkit-transition: all .4s ease;
  -ms-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
  }
  
  .logo:hover {
  z-index: 2;
  opacity: 1;
  background: url(../img/logo1.png) no-repeat;
  }
  </code></pre>
  
  <p>Cheers!</p>