html鼠标悬停图片悬浮,CSS 鼠标悬停图片，显示隐藏文本

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

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^