background-image opacity transition on hover with CSS3

Question

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:

<div class="menu">
 <ul class="sf-menu">
  <li class="page_item page-item-2">
    <a href="http://filip-hostel.pl/?page_id=2">o nas</a></li>
  <li class="page_item page-item-6">
    <a href="http://filip-hostel.pl/?page_id=6">oferta</a></li>
  <li class="page_item page-item-8">
    <a href="http://filip-hostel.pl/?page_id=8">galeria</a></li>
  <li class="page_item page-item-10 current_page_item">
   <a href="http://filip-hostel.pl/?page_id=10">cennik</a></li>
  <li class="page_item page-item-12">
   <a href="http://filip-hostel.pl/?page_id=12">kontakt</a></li>
 </ul>
</div>

And CSS:

    .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;
}

It works on current_page_item but not working properly on others. You can see how does it look HERE Doeas anyone have any idea? Thank's in advance!

Solution 1

Generally CSS3's transition animation only works on existing CSS properties, say background-image and background-position. There is no background-opacity field to satisfy your need. And a transition happens when a property is changed.

Your desired transition is implied by changing background-image (some browser doesn't show this as a fade-in-out transition, like early versions firefox), in this case the two different state for a .current_page_item a would be background-image: url(img/current_page.png); and background-image: url(img/menu_hover.png);, and other properties are the same, like background-position. But for .sf-menu a, the two state are quite different, from background-iamge: none; background-position: left top; to background-image: url(img/menu_hover.png); background-position: center center; There is no way to show a animation between an non-existing image and a new image, so there is no fade-in-out transition.

If you really want this animation, try use a clip box (LI would work) containing your As, and give A a radius border, and a background-color.

Solution 2

I would use :before element that inherits background-image.

Something like this.

a {
  background: black url('http://umea.ee/thumb.jpg') 0 0 no-repeat;
  background-size: 0 0;
  color: white;
  display: inline-block;
  padding: 1em;
  position: relative;
  z-index: 1;
}
a:before {
  background-image: inherit;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 100%;
  left: 0px;
  opacity: 0.5;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: -1;
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
}
a:hover:before {
  opacity: 1;
}

<a href="#">I am link</a>

UPDATE - if you want to animate same background image, then something like this:

a {
  background: black url('http://umea.ee/thumb.jpg') top left no-repeat;
  background-size: 100% 200%;
  color: white;
  display: inline-block;
  padding: 1em;
  position: relative;
  z-index: 1;
}
a:before {
  background: inherit;  
  background-size: inhertit;
  background-position: bottom right;
  content: '';
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: -1;
  opacity: 0;
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
}
a:hover:before {
  opacity: 1;
}

<a href="#">I am link</a>