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

Unsplash

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

HTML 结构如下

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员叨叨叨

Mac使用小技巧

许多从windows转向Mac的童鞋们都会感觉鼠标的滚动方向不习惯,这里告诉大家如何修改鼠标滚动方向:

7910
来自专栏韩东吉的Unity杂货铺

零基础入门 23: UGUI ScrollView

今天要分享的内容,是近期内关于UGUI的最后一篇,UGUI里的滚动视图ScrollView,后期的内容会根据项目实用的功能组件进行分享。

64110
来自专栏Android 技术栈

性能优化之布局优化记录

做开发时间长了之后,收集后台的bug,发现很多都是OOM(Out Of Memory Killer)。性能优化这时候成为了重点,下面是自己项目中布局优化的记录,...

8220
来自专栏腾讯IVWEB团队的专栏

bodymovin 的使用场景初步调研

bodymovin 不仅可以播放动画,可以完全控制动画的播放、暂停、速率、播放对应帧等等。更可以做到更改帧对象的位置。可以说是不可多得的好工具。

1.2K00
来自专栏守候书阁

css写作建议和性能优化小结

还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于cs...

11320
来自专栏编程坑太多

RN组件库-别考虑了关注收藏吧

35440
来自专栏编程微刊

七个帮助你处理Web页面层布局的jQuery插件

24420
来自专栏前端知识分享

第58天:简单焦点轮播图

10530
来自专栏QQ音乐技术团队的专栏

iOS 开发之动画中的时间

在 iOS 开发中使用动画时,可以通过设置动画的 duration、speed、begintime、offset 属性,来设置动画的时长、速度、起始时间及起始偏...

38200
来自专栏iOS开发随笔

iOS类似淘宝头条的文字滚动广告

最近两个项目都用到类似淘宝头条的功能,就是文字上下无限循环滚动,所以决定简单封装一下,以便以后使用。由于习惯用SDCycleScrollView来做广告图的无限...

72230

扫码关注云+社区

领取腾讯云代金券