CSS transition property is not working properly

Question

I am trying to add transition property using css which is not working properly, I am giving my html & css code below :

HTML :

<ul class="job-tile">
    <li style="background-color:#000" class="active" id="sw_start">Tile 1</li>
    <li style="background-color:#000" class="active" id="sw_start">Tile 1</li>
</ul>

CSS :

.job-tile 
{ 
    position:relative; 
    list-style:none; 
    text-align:center;
    display:block;
    float:left;
}
.job-tile li
{
    color: #FFFFFF;
    display: inline-block;
    font-size: 18px;
    height: 22px;
    margin: 12px;
    padding: 50px 0;
    position: relative;
    width: 200px;
    font-weight:normal;
    cursor:pointer;
    float:left;
    opacity:0.6;
    filter:alpha(opacity=60);
    border-radius: 3px;
    transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
}

.job-tile li:hover
{
    opacity:1 !important;
    filter:alpha(opacity=100) !important;
    transition: background-color 0.2s linear 0s, color 0.2s linear 0s;
}

If I put a background color on hover property, it will works fine, but I want to place opacity in on hover.any idea? I am also giving working js fiddle link :- http://jsfiddle.net/4Qcr3/1/

Answer 1

The transition-property you set is not enough (missing the opacity property), you should use the all keyword instead. Also the transition is not fully implemented by all browsers, you should add vendor prefixes to make it function cross-browser well:

.job-tile li {
   ...
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

.job-tile li:hover {
   opacity:1 !important;
   filter:alpha(opacity=100) !important;    
}

Here is the working fiddle