JQuery парить и менять класс

Я работаю над страницей "последние проекты". Проекты отображаются как связанные фотографии внутри тега li. Я хочу добавить jquery, в котором, когда кто-то навещает фотографию, она исчезает. Меняя цвет фона и просматривая небольшой рисунок в средний... код li..

<li><a class="workslinks" href="#"><img src="img/home/l_work/1.png" alt="1" /><div style="z-index:1;" class="workhover"><div class="hoversymbol"></div></div></a></li>

CSS:

li{
    float:right;
    list-style:none;
}
li a{
    display: block;
    width: 215px;
    height: 115px;
    margin: 0 15px 15px 0;
    padding: 4px;
    background: #fff;
    border: 1px #eee solid;
    box-shadow:0px 0px 8px #f1f1f1;
    -moz-box-shadow:0px 0px 8px #f1f1f1;
    -webkit-box-shadow:0px 0px 8px #f1f1f1;
}
li a img{
    display:block;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -transition: all 0.2s ease-in-out;
}
li a img:hover{
    background: #000;
    opacity:1.0;
}
li a .workhover {
    background:rgba(0,0,0,0.4) !important;
    width: 215px;
    height: 115px;
    position: absolute;
    top: 5px;
    display: none;
}

li a .workhover .hoversymbol {
    background:url(../img/home/l_work/links.png) center center no-repeat;
    width:100%;
    height:100%;
}

для кода jquery я попробовал код, чтобы удалить класс со hidden свойством, связанным с workhover div при зависании, но он сделал для всех элементов списка не выбранные только :(

=================

просто я хочу код, который при зависании .workslinks изменяет значение непрозрачности .workhover от 0 до 1 медленно.. так, чтобы оно .workhover как fade in, mmm это возможно? без переходов CSS