body{
margin: 0;/*清除浏览器格式*/
}
.wrap{
overflow: hidden;/*溢出隐藏,即当文字content盒子超出wrap盒子范围时进行隐藏*/
width: 351px;
height: 351px;
margin: 100px auto 0 auto;
background-image: url("images/bg-pic.png");
background-size: 100%;/*图片大小*/
transition: 1s;/*过渡*/
}
/*改变背景图片的变化效果*/
.wrap:hover{
background-size: 110%;/*1s时间图片放大*/
}
.content{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);/*rgba,三色,a表示透明度*/
transform: translateX(-351px);/*位移*/
transition: .5s;
}
/*鼠标悬停在图片时,将内容盒子右移351个像素,达到文字出现的效果*/
.wrap:hover .content{
transform: translateX(0);
}
.content h2{
margin-block-start:0;
margin-block-end:0;
height: 105px;
text-align: center;
line-height: 105px;/*行高等于盒子高度,使文字垂直居中*/
color: white;
}
.content ul li{
line-height: 30px;
color: white;
cursor: pointer;/*设置鼠标箭头样式*/
}
.content ul li:hover{
font-weight: bold;
font-size: 18px;
transition: 1s;
}
宝贝描述
- 男神好帅
- 男神可爱
- 男神有才
- 花开再见
- 男神归来