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 ...
随机推荐
- hdu1753()模拟大型实景数字相加
标题信息: 手动求大的实数在一起, pid=1753">http://acm.hdu.edu.cn/showproblem.php?pid=1753 AC代码: /** *大实数相加 ...
- Java中对象的三种状态
Java中的对象的三种状态是和垃圾回收紧密相关的,因此有必要深究. 状态一:可触及态:从根节点开始,可以搜索到这个对象,也就是可以访问到这个对象,也有人将其称为可达状态. 状态二:可复活态:从根节点开 ...
- android——ObjectAnimator动画
在新的android sdk中谷歌为我们提供了新的动画实现方式.化繁为简.将以前的animation动画进一步封装,使用起来更加方便. 先来看XML文件: <RelativeLayout xml ...
- nodejs 计算内存使用率
//计算内存使用率 function calcMem(){ let mem_total = os.totalmem(), mem_free = os.freemem(), mem_used = mem ...
- WIFI网络访问(一)
一,WIFI 网卡有哪些状态? WIFI 总共有以下五个状态,实际就是一些整形常量: 1. WIFI_STATE_DISABLED : WIFI 不能使用,其值是: 1 . 2. WIFI_S ...
- Windows环境搭建Red5流媒体服务器指南(转)
Windows环境搭建Red5流媒体服务器指南 Windows环境搭建Red5流媒体服务器指南 测试环境:Windows 7 一. 下载安装程序 red5-server 下载地址 https:// ...
- 浅谈HTML5拖放
现在,新增的HTML5元素很多,也给开发者带来了很多便利,比如说:结构标记header .nav.arctile.section.footer 表单元素:url.date.emaile.search. ...
- python基础之 optparse.OptionParser
optparse是专门用来在命令行添加选项的一个模块. 首先来看一段示例代码 from optparse import OptionParser MSG_USAGE = "myprog[ - ...
- avalon前端js直接通过ajax请求传一个对象到后台
代码如下: //企业开票信息 vm.invoiceInfo = { companyId : "", //企 ...
- select语句后面加上for update的作用
Select…For Update语句的语法与select语句相同,只是在select语句的后面加FOR UPDATE [NOWAIT]子句. 该语句用来锁定特定的行(如果有where子句,就是满足w ...