<!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以后出现文字的更多相关文章

  1. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  2. SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件

    接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...

  3. 用css3过滤做遮罩效果

    <!DOCTYPE html><html ng-app="myApp" ng-controller="myController">< ...

  4. css3动画图片波纹效果

    这里的图片很有特点,下面有演示图片样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. 遮罩效果 css3

    CSS3提供了遮罩效果,这是以前CSS2中比较难实现的一个新特性,配合SVG或者canvas同样也可以实现遮罩效果,他的效果就如下图所示: 简单的说就是在一个层上面加一个过滤层,过滤层透明度越低,底层 ...

  6. 浅谈图片蒙版效果-webkit-mask

    会用PS的童鞋一定知道“蒙版”的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果. 大家对-web ...

  7. CSS3实现图片黑白滤镜居中，hover缩放遮罩的效果

       hover: 在前端开发中经常会遇到项目展示,往往会采用卡片方式来描述.众多网站中,普遍采用CSS3的scale()方法来实现交互. 本文即是利用纯CSS实现图片居中缩放,此类方法各大网站均有应 ...

  8. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  9. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

随机推荐

  1. PropertyGrid—添加属性Tab

    零.引言 PropertyGrid用来显示和编辑对象的属性,前面已经简单介绍了如何使用该控件和提供不同的属性编辑方法.前面主要讲如何使用该控件,但有时,该控件无法满足我们的需求,就需要对其进行扩展.本 ...

  2. 易语言转C#小试牛刀

    呵呵,用了几年的易语言,太郁闷了,玩过E的童鞋们懂得,偶然机会尝试C#,现正式投入C#门下. 我会把我学习C#的一些知识和重点,实时发不到我的BLOG中,同想学习C#的童鞋一起成长起来.

  3. C++程序设计实践指导1.4正整数转换为字符串改写要求实现

    改写要求1:改为适合处理超长整数 #include <cstdlib> #include <iostream> #include <string> using na ...

  4. Android进程

    android进程等级 1.前台进程 2.可视进程 3.服务进程 4.后台进程 5.空进程 让应用退出方式 finish();让应用成为空进程 Process.killProcess();杀进程 sy ...

  5. redis 未授权漏洞利用直接登录服务器

    在没有查到杀手之前我是先把带宽&端口用iptables 做了限制这样能保证我能远程操作服务器才能查找原因 2 在各种netstat –ntlp  的查看下没有任何异常 在top 下查到了有异常 ...

  6. paul的cnblog，欢迎大家的光临

    我会在blog里面分享各种资源,技术文章,大家多多交流,欢迎拍砖.

  7. thinkphp微信开发：安全模式消息加解密

    使用thinkphp官方的WeChat包,使用不同模式可以成功,但是安全模式就是不行,现将分析解决结果做下记录. TRight 分析问题: 解密微信服务器消息老是不成功,下载下微信公众平台官方给出的解 ...

  8. MYSQL insert

    准备: create table T4(X int ,Y int); 方法 1. insert [low_priority][high_priority][delayed] into table_na ...

  9. 以Qemu模拟Linux，学习Linux内核

    文章名称:以Qemu模拟Linux,学习Linux内核作      者:five_cent文章地址:http://www.cnblogs.com/senix/archive/2013/02/21/29 ...

  10. [转]JSOM绘制地图区块及航道路径

    From :http://support.sailstech.com/kb/c73fd2405d79911253e568ccdc69256dc7c8fb5c/josm 步驟一: 使用JOSM繪製地圖區 ...