Css – background-image opacity transition on hover with CSS3

background-imagecsscss-transitionsopacity

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!

Best Answer

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.

Related Topic