简单实用css动画 webigge -webkit-transition: all .2s

简介：  鼠标移动到图片上的时候，相关文字从图片下面上滑出来 

提示：利用a标签的hover功能  , a 标签 display:block
a:hover .item_info {
    bottom: 0;
}






节点关系


 a标签


    div
            
              图片


             文字div




a标签结束


动画css 
.item_info {
    position: absolute;
    left: 0;
    bottom: -94 px;
    width: 100 % ;
    height: 94 px;
    color: #fff; - webkit - transition: all .2 s; 
    - moz - transition: all .2 s; 
    - ms - transition: all .2 s; 
    - o - transtion: all .2 s;
}




其他相关css


a {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}


.project_image {
    position: relative;
    overflow: hidden;
}
.mask_text {
    position: absolute;
    z-index: 99;
    font-size: 12px;
    padding: 15px;
    width: 255px;
}


.mask_bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 98;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}





<a href="/index.php?ctl=deal&amp;act=show&amp;id=41" target="_blank">
    <div class="project_image">
        <img data-src="http://webigger.cn/public/attachment/201601/18/22/569cfb3c6661a_300x210.jpg" alt="爱心插上歌声的翅膀 天籁童声公益音乐会，我们约吗？" lazy="true" src="http://webigger.cn/public/attachment/201601/18/22/569cfb3c6661a_300x210.jpg" isload="true" />
        <div class="item_info" style="bottom: 100px;">
            <div class="mask_text">
                <div class="item_brief">
                    爱心插上歌声的翅膀 天籁童声公益音乐会，我们约吗？
                </div>
                <div class="blank10"></div>
                <div class="f_red tc">
                    查看项目
                </div>
            </div>
            <div class="mask_bg"></div>
        </div>
        <div class="blank0"></div>
    </div>
</a>