鼠标经过时，模块滑出、文字显示；鼠标离开时，模块归位、文字显示3行，多余的用省略号代替。slide动画是标签的原有高度进行动画

要实现的效果

html

<ul class="niurenul">
                        <li>
                            <a href="">
                                <img class="niurenimg" src="images/index/niuren1-2.png">
                                <img class="newicon" src="images/index/new2.png">
                                <div class="niurenmb">
                                    <p class="niurenmbp">毛老师 <span>Java</span>
                                    </p>
                                    <p class="niurenpro">JavaEE开发与教学多年，精通JavaEE技术体系，对流行框架JQuery、DWR、Struts1/2，Hibernate，Spring，MyBatis、JBPM、Lucene等有深入研究。授课逻辑严谨，条理清晰，注重学生独立解决问题的能力。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img class="niurenimg" src="images/index/niuren1-2.png">
                                <img class="newicon" src="images/index/new2.png">
                                <div class="niurenmb">
                                    <p class="niurenmbp">毛老师 <span>Java</span>
                                    </p>
                                    <p class="niurenpro">JavaEE开发与教学多年，精通JavaEE技术体系，对流行框架JQuery、DWR、Struts1/2，Hibernate，Spring，MyBatis、JBPM、Lucene等有深入研究。授课逻辑严谨，条理清晰，注重学生独立解决问题的能力。</p>
                                </div>
                            </a>
                        </li></ul>

css

在这里插入代码片.niurenul li {
    height: 320px!important;
}

.niurenul a {
    position: absolute;
    display: inline-block;
    height: 100%!important;
}

.niurenimg {
    position: absolute;
    z-index: 1;
}

.niurenmb {
    position: absolute;
    width: 100%;
    height: 122px;
    background: rgba(0, 0, 0, 1);
    opacity: 0.5;
    z-index: 2;
    bottom: 0;
}

.niurenmbp {
    font-size: 18px!important;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: rgba(255, 255, 255, 1)!important;
    /* line-height:10px; */`在这里插入代码片`
}

.niurenmbp span {
    font-weight: 200!important;
    color: rgba(255, 255, 255, 1)!important;
}

.niurenpro {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 176px;
    height: 60px;
    font-size: 12px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1)!important;
}

jq:这里在写的时候有一个错误，是用了slideup和slidedown，这两个动画事件是根据自己原有的高度进行划入和滑出，用在这里改变块的高度时，鼠标经过时会一直触发动画事件。用自定义动画和css更改高度则可解决这个问题

$(".niurenmb").mouseenter(
        function(event) {
            console.log(1);
            $(this).stop().animate({

                height: "320px",

            }, 300);
            $(this).children(".niurenpro").stop().css({
                'overflow': 'visible',
                'text-overflow': '',
                'display': '',
                '-webkit-line-clamp': '',
                ' -webkit-box-orient': ''
                    // 'width': '176px'
            });

            event.stopPropagation();
            event.preventDefault();
            return false;


        }
    );
    $(".niurenmb").mouseleave(
        function(event) {
            $(this).stop().animate({

                height: "120px",

            }, 300);
            $(this).children(".niurenpro").stop().css({
                'overflow': ' hidden',
                'text-overflow': 'ellipsis',
                'display': '-webkit-box',
                '-webkit-line-clamp': '3',
                ' -webkit-box-orient': 'vertical',
                'width': '176px'
            });
            // .stop().slideDown();
            event.stopPropagation();
            event.preventDefault();
            return false;
        }
    );