<!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. Linux以及Android开发中的小技巧和长繁命令记录收集

    不断更新收集中.... 201407161654 ssh以nx_guest的身份登录到172.24.221.137,然后在172.24.221.137与172.24.61.252的8080port建立 ...

  2. webpack构建具备版本管理能力的项目

    webpack是时下十分流行的编译和打包工具,它提供一种可扩展的loader的方式,简单的配置,便可以编译打包各类型的文件,包括js.css.image.font.html,以及各种预编译语言都不在话 ...

  3. 【巧妙算法系列】【UVA 11384】 Help is needed for Dexter 正整数序列

    Help is needed for Dexter Time Limit: 3 Second Dexter is tired of Dee Dee. So he decided to keep Dee ...

  4. OSError: [Errno 13] Permission denied: '/etc/cron.d/1sandbox_registration'

    使用Hortonworks 的twitter tutorial: http://hortonworks.com/hadoop-tutorial/how-to-refine-and-visualize- ...

  5. JQ 事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JQ----树杈型导航

    简单的做了一个树杈型的导航结构如下所示: 废话不多说,上代码: HTML: <div class="wrapper"> <div class="tabt ...

  7. UVa230 Borrowers (STL)

     Borrowers  I mean your borrowers of books - those mutilators of collections, spoilers of the symmet ...

  8. QString转LPCWSTR

    QFileInfo info("./records.db"); std::string str = info.absoluteFilePath().toStdString(); / ...

  9. 测试框架mochajs详解

    测试框架mochajs详解 章节目录 关于单元测试的想法 mocha单元测试框架简介 安装mocha 一个简单的例子 mocha支持的断言模块 同步代码测试 异步代码测试 promise代码测试 不建 ...

  10. SqlServer中代理作业实现总结

    今天弄SqlServer代理作业,弄了半天,把遇到的问题总结出来,主要是抨击一下Sql Server的Express版本.好了,看下面的正题. 首先,需要安装Sql Server Agent服务,该服 ...