title: CSS3 background-image transition
body: <p>In this website I am making there is an arrow link that when you hover over it it becomes a new image with a cool addition to the image.  I had this working completely fine with this code below and I did not edit the code at all but it seems that when I woke up the "all" transition no longer works for this.  I can't find what is wrong. I am also using this to fade a background-image that is a solid color to fade to another background image that is a different solid color.</p>
  
  <pre><code>a.visitarrow
  {
  -webkit-transition:all 1.0s ease-in-out;
  -moz-transition:all 1.0s ease-in-out;
  -o-transition:all 1.0s ease-in-out;
  -ms-transition:all 1.0s ease-in-out;        
  transition:all 1.0s ease-in-out;
  display:block;
  width:130;
  height:121;
  background-image:url('pictures/visit.png');
  }
  
  a.visitarrow:hover
  {
  -webkit-transition:all 0.5s ease-in-out;
  -moz-transition:all 0.5s ease-in-out;
  -o-transition:all 0.5s ease-in-out;
  -ms-transition:all 0.5s ease-in-out;        
  transition:all 0.5s ease-in-out;
  display:block;
  width:130;
  height:121;
  background-image:url('pictures/visithover.png');
  }
  </code></pre>