今天，越来越多的博客都开始使用图片作为主页，但是如果没有一个有效的方式处理文字，单纯的图片仍旧会令人迷惑。现在，我们看看如何用CSS3创造一个华丽的鼠标覆盖效果，在图片上显示更多的文字内容。
本文的代码全部来自http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/，如果您对其中的任何技术细节存在疑问，请以原文为准。
HTML
HTML代码一如既往地简单，我们只需要创建一个能够容纳图片和其它文字信息的一个容器就可以了。
Title
Your Text Read More
CSS
现在，我们来加上一些通用的CSS，构建一个基本的效果。
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
效果
如果仅仅只是这样，我们就只能得到一个普通的链接一般的效果而已，并不能显示出我们需要的信息。现在，我们添加一些真正的效果代码，来让文字信息能够在鼠标覆盖时显现出来。
因为我们可能有不止一种效果，所以在写CSS之前，我们首先给之前的HTML骨架，添加一个类，就像下面这样：
我们给view又增加了一个view-first类在其后，以确保我们的框架CSS和效果CSS都能在这个div上体现出来。紧接着，我们开始为覆盖效果添加CSS：
.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(219,127,8, 0.7);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
这是一些简单的过渡效果，能够让文字在鼠标覆盖时显现出来。到这里其实我们已经具备了基本的效果，但我们还想让它更好一些。
.view-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}
我们为过渡效果增加了延时。这一点非常重要，但也常常被忽略。一个好的动画效果需要发生的稍微缓慢一些，以便让观众有足够的时间去享受过程，就像我们期待手风琴（accordion）抽屉能够在点击时出现收缩/展开的动画，而不是一瞬间就已经完成了工作。
好了，现在我们完成了！还有许多更多更华丽的效果，我都放到了demo中，根据上面的原理，大家可以自己探寻一下了。
