CODEWITHSUNDEEP
htmlcsscss-transitions
Amit Chowdhury
Amit Chowdhury

Reputation: 613

CSS transition property is not working properly

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/

Upvotes: 1

Views: 1201

Answers (1)

King King
King King

Reputation: 63317

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

Upvotes: 2

Related Questions