Unsplash
我在 JavaScript 鼠标悬停图片，显示隐藏文本 这篇博文当中实现了同样的效果，只不过是通过 JS 来实现的，但其实，通过 CSS 动画也能实现同样的效果，直接看代码吧
HTML 结构如下
世界上最好的年糕
多熬粥少熬夜，多吃鸡腿少吃亏
CSS 样式如下
#Main {
width: 600px;
margin: 50px auto;
height: 400px;
}
.con {
width: 500px;
height: 360px;
float: left;
margin: 0px 10px;
position: relative;
box-shadow: 3px 3px 10px #666;
overflow:hidden;
}
.con img {
width: 500px;
height: 360px;
}
.con span {
width: 248px;
height: 390px;
background: #333;
position: absolute;
left: -500px;
top: 0px;
filter: Alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
padding: 20px;
-webkit-transition: left 0.5s ease;
}
.con span h1 {
height: 30px;
color: #fff;
font-size:18px;
text-align: center;
position: relative;
left: -500px;
-webkit-transition: left 1s ease;
}
.con span p {
line-height: 25px;
font-size:14px;
color: #fff;
position: relative;
left: -500px;
-webkit-transition: left 1s ease;
}
.con:hover span {
left:0px;
}
.con:hover span h1 {
left: 0px;
}
.con:hover span p {
left: 0px;
}
运行结果
本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
