css3实现图片遮罩效果鼠标hover以后出现文字


Posted in HTML / CSS onNovember 05, 2013

鼠标hover 以后。图片上面出现一个遮罩, 透明度变化, 显示设置好的文字的文字,完全使用css 实现,下图是效果
css3实现图片遮罩效果鼠标hover以后出现文字 
关键代码

复制代码
代码如下:

.featured-image:hover {
opacity: 0.9;
color: #fff;
background: rgba(0,0,0,0.8);
}

看源码吧
复制代码
代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#content article {
float: left;
margin-right: 4%;
max-width: 236px;
position: relative;
width: 22%;
margin-bottom: 3.5%;
}
#content article:nth-child(4n+4) {
margin-right: 0;
}
.post-format-content {
position: relative;
background: #111;
}
.post-thumbnail {
max-width: 100%;
height: auto;
overflow: hidden;
}
.content-wrap {
padding: 0;
position: absolute;
text-align: center;
width: 100%;
top: 0;
bottom: 0;
display: table-cell;
vertical-align: middle;
overflow: hidden;
}
.content-wrap h1.entry-title {
display: table;
font-size: 110%;
height: 100%;
text-transform: uppercase;
width: 100%;
margin:0;
}
.edit-link {
z-index: 2;
}
.featured-image {
display: table-cell;
position: relative;
transition: opacity .25s ease-in-out, background .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out, background .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out, background .25s ease-in-out;
vertical-align: middle;
z-index: 1;
color: #fff;
text-decoration: none;
opacity: 0;
padding: 10%;
}
.featured-image:hover {
opacity: 0.9;
color: #fff;
background: rgba(0,0,0,0.8);
}
.post-thumbnail img {
display: block;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="content">
<article class="post-152 post type-post status-publish format-standard hentry category-people category-photos">
<div class="post-format-content">
<div class="post-thumbnail"> <img width="480" height="640" src="assets/img/1.jpg" class="attachment-thumbnail wp-post-image" alt="105694702"> </div>
<div class="content-wrap">
<h1 class="entry-title"><a href="" class="featured-image" rel="bookmark">Music & Fashion</a></h1>
</div>
</div>
</article>
<article class="post-152 post type-post status-publish format-standard hentry category-people category-photos">
<div class="post-format-content">
<div class="post-thumbnail"> <img width="480" height="640" src="assets/img/2.jpg" class="attachment-thumbnail wp-post-image" alt="105694702"> </div>
<div class="content-wrap">
<h1 class="entry-title"><a href="" class="featured-image" title="amp; Fashion" rel="bookmark">Music & Fashion</a></h1>
</div>
</div>
</article>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 #HTML / CSS
CSS3之多背景background使用示例
Oct 18 #HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 #HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 #HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 #HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 #HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 #HTML / CSS
You might like
PHP网站提速三大“软”招
2006/10/09 PHP
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
Vue的Options用法说明
2020/08/14 Javascript
Python常用随机数与随机字符串方法实例
2015/04/09 Python
python 爬取微信文章
2016/01/30 Python
python 判断网络连通的实现方法
2018/04/22 Python
python实现flappy bird小游戏
2018/12/24 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
python实现在线翻译功能
2020/03/03 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
开会迟到检讨书
2014/01/08 职场文书
小学安全教育材料
2014/02/17 职场文书
个人欠款担保书
2014/05/20 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
python四种出行路线规划的实现
2021/06/23 Python
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript