css3实现图片遮罩效果鼠标hover以后出现文字
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#content article {
float: left;
margin-right: %;
max-width: 236px;
position: relative;
width: %;
margin-bottom: 3.5%;
}
#content article:nth-child(4n+) {
margin-right: ;
}
.post-format-content {
position: relative;
background: #;
}
.post-thumbnail {
max-width: %;
height: auto;
overflow: hidden;
}
.content-wrap {
padding: ;
position: absolute;
text-align: center;
width: %;
top: ;
bottom: ;
display: table-cell;
vertical-align: middle;
overflow: hidden;
}
.content-wrap h1.entry-title {
display: table;
font-size: %;
height: %;
text-transform: uppercase;
width: %;
margin:;
}
.edit-link {
z-index: ;
}
.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: ;
color: #fff;
text-decoration: none;
opacity: ;
padding: %;
}
.featured-image:hover {
opacity: 0.9;
color: #fff;
background: rgba(,,,0.8);
}
.post-thumbnail img {
display: block;
}
img {
max-width: %;
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="" height="" src="assets/img/1.jpg" class="attachment-thumbnail wp-post-image" alt=""> </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="" height="" src="assets/img/2.jpg" class="attachment-thumbnail wp-post-image" alt=""> </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>
css3实现图片遮罩效果鼠标hover以后出现文字的更多相关文章
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件
接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...
- 用css3过滤做遮罩效果
<!DOCTYPE html><html ng-app="myApp" ng-controller="myController">< ...
- css3动画图片波纹效果
这里的图片很有特点,下面有演示图片样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 遮罩效果 css3
CSS3提供了遮罩效果,这是以前CSS2中比较难实现的一个新特性,配合SVG或者canvas同样也可以实现遮罩效果,他的效果就如下图所示: 简单的说就是在一个层上面加一个过滤层,过滤层透明度越低,底层 ...
- 浅谈图片蒙版效果-webkit-mask
会用PS的童鞋一定知道“蒙版”的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果. 大家对-web ...
- CSS3实现图片黑白滤镜居中，hover缩放遮罩的效果
hover: 在前端开发中经常会遇到项目展示,往往会采用卡片方式来描述.众多网站中,普遍采用CSS3的scale()方法来实现交互. 本文即是利用纯CSS实现图片居中缩放,此类方法各大网站均有应 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
随机推荐
- [Redux] Generating Containers with connect() from React Redux (AddTodo)
Code to be refacted: const AddTodo = (props, { store }) => { let input; return ( <div> < ...
- photoswipe
allowUserZoom: 允许用户双击放大/移动方式查看图片. 默认值 = trueautoStartSlideshow: 当PhotoSwipe激活后,自动播放幻灯片. 默认值 = falsea ...
- EF Code Frist
EF:学习资料 http://www.cnblogs.com/libingql/category/366833.html
- 2014年1月9日 Oracle 实用系统函数
1.空值处理 1.1 NVL(column/value,VALUE2) 与SQLSERVER的ISNULL相同 1.2 NVL2(column/value,Value2,Value3) 若参数1为空则 ...
- 000-C#基础
C#中数据类型的继承关系如下 System.Object |-------------System.ValueType | |-------System.Boolean | |-------Syste ...
- javascript 事件代理及应用
事件代理又叫事件委托在前端发开中实际是非常有用的,说事件代理之前我们先说说事件绑定 <p onclick="test()" ></p> function t ...
- linux常用命令--diff
diff是Unix系统的一个很重要的工具程序. 它用来比较两个文本文件的差异,是代码版本管理的基石之一.你在命令行下,输入: $ diff <变动前的文件> <变动后的文件> ...
- SFTP信任公钥配置及JSCH库
1.SFTP信用公钥配置 1.1 客户端生成密钥对 以DSA举例: ssh-keygen –t dsa 执行该命令后,在home/用户名/.ssh目录下,会生成id_dsa和id_dsa.pub两个文 ...
- Android studio GPU Monitor :GPU Profiling needs to be enabled in the device's developer options
Android studio GPU Monitor 在真机上不能使用,提示:GPU Profiling needs to be enabled in the device's developer o ...
- TextArea里Placeholder换行问题
页面上使用TextArea控件时,会时不时的想给个提示,比如按照一定方式操作之类的.正常情况下,会使用Placeholder,但这样的提示是不会换行的,无论是用\r\n,还是用<br/>, ...