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 相关文章推荐
CSS3中Transform动画属性用法详解
Jul 04 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 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 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
node.js遍历目录的方法示例
2018/08/01 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
python和pyqt实现360的CLable控件
2014/02/21 Python
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
简单介绍Python中的struct模块
2015/04/28 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
Python sep参数使用方法详解
2020/02/12 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
WSDL的操作类型主要有几种
2013/07/19 面试题
庆八一活动方案
2014/01/25 职场文书
技术比武方案
2014/05/19 职场文书
同事去世追悼词
2015/06/23 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript