鼠标移入后逐渐变换DIV的背景色为黑色半透明，这种效果如何实现？

  html:
    <a href="#" class="c-li-1-a">
         <img src="images/ask.png" alt=""/>
         <div class="img-black"></div>
    </a>

   css:
   .c-li-1-a {
        display: block;
        width: 135px;
        height: 90px;
        float: left;
    }
    img {
        position: absolute;
    }
    .img-black {
        width: 135px;
        height: 90px;
        position: relative;
    }
    .img-black:hover {
        background-color: #000;
        opacity: 0.4;
    }

我想鼠标移入div.img-black上后此标签在2S内逐渐变换背景色为黑色半透明，效果需要怎么写？需要兼容IE6,7,8