title: background-image opacity transition on hover with CSS3
body: <p>I'm trying to use background image opacity (from 0 to 100%) transition when user put cursor over a link.
  I have smth like this:</p>
  
  <pre><code>&lt;div class="menu"&gt;
   &lt;ul class="sf-menu"&gt;
    &lt;li class="page_item page-item-2"&gt;
      &lt;a href="http://filip-hostel.pl/?page_id=2"&gt;o nas&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item page-item-6"&gt;
      &lt;a href="http://filip-hostel.pl/?page_id=6"&gt;oferta&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item page-item-8"&gt;
      &lt;a href="http://filip-hostel.pl/?page_id=8"&gt;galeria&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item page-item-10 current_page_item"&gt;
     &lt;a href="http://filip-hostel.pl/?page_id=10"&gt;cennik&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item page-item-12"&gt;
     &lt;a href="http://filip-hostel.pl/?page_id=12"&gt;kontakt&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>    .sf-menu a, .sf-menu a:visited{
  border:none;
  color:#ffffff;
  font-family:Arial;
  font-size:16px;
  line-height:72px;
  width:65px;
  text-align:center;
  padding:0px;
  margin:0;
  background:none;
  -webkit-transition: 1.0s ease-in;
      -moz-transition: .01s ease-in;
      -o-transition: 1.0s ease-in;
      -ms-transition: 1.0s ease-in;
      transition: 1.0s ease-in;
  
  }
  
  .sf-menu li:hover{
  background:none;
  }
  
  .sf-menu a:hover{
  background: url(img/menu_hover.png) center center no-repeat;
  
  }
  
  .current_page_item a{
  background: url(img/current_page.png) center center no-repeat;
  }
  </code></pre>
  
  <p>It works on current_page_item but not working properly on others.
  You can see how does it look <a href="http://www.filip-hostel.pl" rel="nofollow">HERE</a>
  Doeas anyone have any idea?
  Thank's in advance!</p>