仿VIVO官网

 /* 以下是动态页面 */

        .content {

            width: 200px;

            height: 200px;

            position: relative;

            overflow: hidden;

            /* 超出屏幕（溢出的）自动隐藏 */

            margin: auto;

        }

        .content img {

            width: 200px;

            height: 200px;

            float: left;

            transition: all 0.6s;

            /* 过渡动画，使页面变化更加平滑 */

            cursor: pointer;

            /* 游标，光标移动 */

            border: 0;

        }

        .content img:hover {

            transform: scale(1.5);

        }

        .note {

            width: 200px;

            height: 50px;

            display: block;

            text-decoration: none;

            color: #FFFFFF;

            cursor: pointer;

            text-indent: 1em;

            line-height: 30px;

            /*初始化隐藏多余文字*/

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

            float: left;

            position: absolute;

            bottom: 0px;

            background-color: rgba(0, 0, 0, 0.5);

            /* 背景变灰 */

            transition: all 0.6s;

        }

        .note:hover {

            width: 200px;

            height: 200px;

            line-height: 30px;

            text-indent: 1em;

            /*显示全部文字*/

            white-space: normal;

            word-break: break-word;

            text-overflow: inherit;

        }