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

我在 JavaScript 鼠标悬停图片，显示隐藏文本 这篇博文当中实现了同样的效果，只不过是通过 JS 来实现的，但其实，通过 CSS 动画也能实现同样的效果，直接看代码吧

HTML 结构如下

代码语言：javascript复制

<div id="Main">
    <div class="con">
        ![](image/n1.jpg)
        <span>
            <h1>世界上最好的年糕</h1>
            <p>多熬粥少熬夜，多吃鸡腿少吃亏</p>
        </span>
    </div>
</div>

CSS 样式如下

代码语言：javascript复制

#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

其他

0 人点赞