<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            margin: 0 auto;
            width: 300px;
            height: 240px;
            cursor: pointer;
            overflow: hidden;
            position: relative;
        }
        div img{
            width: 300px;
            height: 240px;
        }
        div p{
            display: block;
            position: absolute;
            bottom: -50px;
            width: 290px;
            height: 50px;
            line-height: 50px;
            padding-left: 10px;
            background-color:rgba(0, 0, 0, 0.6);
            color: white;
            transition: bottom 1s linear 0s;
        }
        div:hover p{

            bottom: 0px;
        }
</style>
<div>
        <img src="img/duck.png" alt="">
        <p>这是一只小黄鸭</p>
​</div>