/* 以下是动态页面 */
.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;
}