简单实用又不花里胡哨的鼠标滑过样式一、纯图片的DIVhtml代码**（以下效果

一、纯图片的DIVhtml代码**（以下效果皆围绕这个代码展开）**：

文章图片

文章图片
1、缓动上移效果图：

文章图片
Kitty的标题标题
这是内容
1、框内放大图片+阴影效果图：

文章图片
Kitty的头像
Kitty的名字
css代码：
.box {
position:relative;
z-index:1;
display:inline-block;
overflow:hidden;
background:#3085a3;
text-align:center;
cursor:pointer
}
.box img {
width:200px;
height:200px;
opacity:1;
transition:opacity .35s,transform .35s;
float:left;
}
.box:hover img {
opacity:.5;
}
.box h3 {
margin-top:20%;
transition:transform .35s;
transform:translate3d(0,20px,0);
opacity:0;
color:#fff;
font-size:16px;
}
.box p {
margin:10px 0 0;
padding:15px;
border:1px solid #fff;
opacity:0;
transition:opacity .35s,transform .35s;
transform:translate3d(0,20px,0) scale(1.1);
color:#FFF;
}
.box:hover h3 {
transform:translate3d(0,0,0);
opacity:1;
}
.box:hover p {
opacity:1;
transform:translate3d(0,0,0) scale(1);
}
.box2 {
width:200px;
height:200px;
padding:15px;
position:absolute;
box-sizing: border-box;
}
2、文字滑动进入效果图：

文章图片
Kitty 的测试案例
这里放内容简介，内容简介,这里放内容简介，内容简介,这里放内容简介，内容简介
【简单实用又不花里胡哨的鼠标滑过样式】作者：小小摇钱树链接：来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。