（鼠标移入出现介绍）

需要插入jQuery库 

 效果图

 

HTML 

<ul>
        <li>
            <img src="./img/01.jpg" />
            <p></p>
            <span>百度一下,你就知道</span>
        </li>
        <li>
            <img src="./img/02.jpg" />
            <p></p>
            <span>淘！我喜欢</span>
        </li>
        <li>
            <img src="./img/03.jpg" />
            <p></p>
            <span>新浪微博，尽情关注</span>
        </li>
        <li>
            <img src="./img/04.jpg" />
            <p></p>
            <span>邮箱推荐网易</span>
        </li>
        <li>
            <img src="./img/05.jpg" />
            <p></p>
            <span>今天你搜狐了吗</span>
        </li>
        <li>
            <img src="./img/06.jpg" />
            <p></p>
            <span>上腾讯更方便</span>
        </li>
        <li>
            <img src="./img/07.jpg" />
            <p></p>
            <span>中国领先视频网站</span>
        </li>
        <li>
            <img src="./img/08.jpg" />
            <p></p>
            <span>综合网购首选</span>
        </li>
    </ul>

 

 CSS

 *{margin: 0;padding: 0;}
        ul{width: 792px;height: 295px;padding: 20px 0 0 20px;border: 1px solid #ccc;
        margin: 100px auto;background:#f5f5f5;}
        ul li{list-style: none;float: left;margin: 0 20px 20px 0;
        position: relative;overflow: hidden;border: 0px solid red;cursor: pointer;}
        ul li p,ul li span{position: absolute;left: 0;bottom: -25px;}
        ul li p{height: 25px;background: rgba(0, 0, 0, 0.5);width: 100%;}
        ul li span{font-size: 12px;color: #fff;height: 25px;display: inline-block;width: 100%;
        text-align: center;line-height: 25px;}

JS 

 $(function (){
            $("ul li").hover(function (){
                $(this).children("p,span").stop(true).animate({bottom:3},1000)
            },function (){
                $(this).children("p,span").stop(true).animate({bottom:-25},1000)
            }
            );
        });