<!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. 【欧拉函数】【HDU1286】 找新朋友

    找新朋友 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  2. DataGridView显示行号

    //可以在DataGirdView的RowPostPaint事件中进行绘制. //如:添加以下方法代码 private void DrawRowIndex(object sender, DataGri ...

  3. 客户端js判断文件类型和文件大小即限制上传大小

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. C++在数组元素个数未知情况下声明数组

    我们都从书上学习的方法,定义一个数组需要数组名.类型以及数组元素个数,一般定义必须明确元素的个数,否则无法通过编译. 1. int a[]; 2. int n; int a[n]; 就想上面这两种情况 ...

  5. JQuery>>>get/post赋值全局变量

    JQuery' post&get: asynchronous. 2014-06-27 16:57:25     var client; function getClient(){ $.ajax ...

  6. Github获取仓库最新Release版本号API

    package me.chunsheng.hongbao.utils; import android.content.Context; import android.content.Intent; i ...

  7. ORA-04092: COMMIT 不能在触发器中

    触发器无需commit也不能写commit触发器和触发它的DML是同一个事务DML提交了,触发器的操作也提交了,要不就一起回滚了 当然,如果你一定要在触发器里写COMMIT那就用自治事务相当于一个事务 ...

  8. android签名相关

    生成apk.keystore: 右键工程:Android tools——>Export Signed Application Package后,相册中截图: 一直下一步下一步,成功后jarsig ...

  9. 【改造Linux命令之rm - 删除文件或目录-】

    用途说明 rm命令是常用的命令,用来删除文件或目录(remove files or directories).它也是一个危险的命令,使用的时候要特别当心,尤其对于新手,否则整个系统就会毁在这个命令(比 ...

  10. Inno Setup技巧[实例]添加自定义页面

    原文 http://hi.baidu.com/watashi/item/b3dda993459ff8f0291647a0 通过“添加自定义页面”可以丰富安装程序的功能.本文以添加一个页面“选择安装类型 ...