<!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# Socket学习笔记一

    小记:刚接触网络编程觉得网络是个神奇的东西,所以对它就很有兴趣,想了解下网络是如何进行进行数据传输的,那么开始第一天的学习吧!ReadyGo!!! 首先我们要了解一下几点内容: 1.网络中进程之间如何 ...

  2. 字符串最小表示法 O（n)算法

    网上看了这篇文章后还是感觉有些地方讲的没有详细的证明所以添加了一点 红色字是博主写的 求字符串的循环最小表示: 上面说的两个字符串同构的,并没有直接先求出Min(s),而是通过指针移动,当某次匹配串长 ...

  3. java-随学随记之基础篇

    一.Java是一门高级语言,具有跨平台性(一次编译到处运行) 1.javac.exe命令,编译器   javac 源文件名.java 2.java.exe命令,启动虚拟机 java 类名 二.环境变量 ...

  4. sublime text 3 快捷键大全以及配置编译环境（转）

    Sublime text 3是码农最喜欢的代码编辑器,每天和代码打交道,必先利其器,掌握基本的代码编辑器的快捷键,能让你打码更有效率.刚开始可能有些生疏,只要花一两个星期 坚持使用并熟悉这些常用的快捷 ...

  5. 图的深度优先遍历的实现 c/c++ DFS

    #include <iostream> #include <stdio.h> #include <stdlib.h> #include <string.h&g ...

  6. vim自动补全文章搜集

    引用文章A:http://blog.csdn.net/wendy260310/article/details/18035555 文章介绍:添加C++标准库的tags文件方法.(中文版) 引用文章B:h ...

  7. 【搜索引擎Jediael开发笔记2】使用HttpClient下载网页至本地文件

    本文使用HttpClient根据url进行网页下载.其中 (1)HttpClient的相关知识请参见HttpClient基础教程 (2) package org.ljh.search.download ...

  8. 过河问题--nyoj题目47

    过河问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 在漆黑的夜里,N位旅行者来到了一座狭窄而且没有护栏的桥边.如果不借助手电筒的话,大家是无论如何也不敢过桥去的 ...

  9. linux----用户与whoami

    linux中的su 命令可以完成用户切换:如我们先由root切换到mysql用户可以这样做su - mysql whoami #这个时候linux会打印出mysql who am i #这个时候lin ...

  10. Nginx 变量漫谈（六）

    Nginx 内建变量用在“子请求”的上下文中时,其行为也会变得有些微妙. 前面在 (三) 中我们已经知道,许多内建变量都不是简单的“存放值的容器”,它们一般会通过注册“存取处理程序”来表现得与众不同, ...