<!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. C程序设计语言(K&R)笔记

    1.表达式中float类型的操作数不会自动转换为double类型.一般来说,数学函数(如math.h)使用双精度类型的变量.使用float类型主要是为了在使用较大数组时节省存储空间,有时也为了节省机器 ...

  2. GCD 和延时调用

    因为 Playground 不进行特别配置的话是无法在线程中进行调度的,因此本节中的示例代码需要在 Xcode 项目环境中运行.在 Playground 中可能无法得到正确的结果. GCD 是一种非常 ...

  3. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

  4. 【类似N^N做法的斐波那契数列】【HDU1568】 Fibonacci

    Fibonacci Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  5. SQL创建登陆用户和赋予权限

    主要针对Sql server 2005及以上,创建简单用户名和密码所引起的密码简单的问题.解决方案 CHECK_POLICY = OFF; --强制密码策略 use MusicStore --创建登陆 ...

  6. Unity IOC注入详细配置(MVC,WebApi)

    一直想写一篇关于unity 详细的配置信息的文章,也算是自我总结吧 先介绍了unity , Unity是微软官方推荐使用的轻型的IOC框架,支持各种方式的注入 ,使用来解耦的利器. 获取unity 的 ...

  7. W - Bitset（第二季水）

    Description Give you a number on base ten,you should output it on base two.(0 < n < 1000)      ...

  8. 我用爬虫一天时间“偷了”知乎一百万用户，只为证明PHP是世界上最好的语言

    我用爬虫一天时间“偷了”知乎一百万用户,只为证明PHP是世界上最好的语言 2015-08-06 猿圈 我用爬虫一天时间“偷了”知乎一百万用户 只为证明PHP是世界上最好的语言 看了不少朋友圈里推荐的P ...

  9. 国内好用的公用DNS 服务器。

    阿里 AliDNS 223.5.5.5 223.6.6.6 CNNIC SDNS 1.2.4.8 210.2.4.8 Google DNS 8.8.8.8 8.8.4.4 OpenDNS 208.67 ...

  10. flask twisted 结合方案

    from flask import Flask, render_template, g app = Flask(__name__) @app.route("/") def inde ...