在网页中我们经常会在页面上鼠标悬停时看到一些动效，例如图片跟随鼠标点击放大、懒加载等，这个交互细节在各个主流网站中随处可见，能为网站增添个性亮点。

背景

在我们的日常项目中，也会遇到这样的需求，在当前环境下，此类效果大多是靠jQuery来实现的，但是用jQuery实现有不少毛病，原因如下：

• jQuery里面封装了各种函数，整个框架相对比较重;
• jQuery没有分割模块，只有全部导入;
• jQuery压缩后的jq包都有91kB，和css对比来说这样的页面加载速度区别很大;

那么我们用css3实现鼠标悬停的特效呢？下面和大家一一道来。
首先，我们先来看看下实现后的效果：

技术实现

我们先用代码把页面的结构给写出来

        <div class="container demo">
            <header>
                <h1>css3标题悬停效果</h1>
            </header>
            <ul class="grid cs-style">
                <li>
                    <figure>
                        <img src="images/1.png" alt="img04">
                        <figcaption>
                            <h3>css3标题悬停效果</h3>
                            <span>webstack</span>
                            <a href="http://www.webstacks.cn/">
                    查看详情</a>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/1.png" alt="img04">
                        <figcaption>
                            <h3>css3标题悬停效果</h3>
                            <span>webstack</span>
                            <a href="http://www.webstacks.cn/">
                    查看详情</a>
                        </figcaption>
                    </figure>
                </li>
            </ul>
        </div><!-- /container -->

然后再为他们添加上衣服（css）
css代码

*, *:after, *:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
body, html {
   font-size: 100%;
   padding: 0;
   margin: 0;
}
body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #b3b9bf;
    background: #f9f9f9;
}
a {
    color: #888;
    text-decoration: none;
}
a:hover,
a:active {
    color: #333;
}
/* Header Style */
.container > header {
    margin: 0 auto;
    padding: 2em;
    text-align: center;
    background: rgba(0,0,0,0.01);
}
.container > header h1 {
    font-size: 2.625em;
    line-height: 1.3;
    margin: 0;
    font-weight: 300;
}
/* Grid Style */
.grid {
    padding: 20px 20px 100px 20px;
    max-width: 1300px;
    margin: 0 auto;
    list-style: none;
    text-align: center;
}
.grid li {
    display: inline-block;
    width: 440px;
    margin: 0;
    padding: 20px;
    text-align: left;
    position: relative;
}
.grid figure {
    margin: 0;
    position: relative;
}
.grid figure img {
    max-width: 100%;
    display: block;
    position: relative;
}
.grid figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    background: #2c3f52;
    color: #ed4e6e;
}
.grid figcaption h3 {
    margin: 0;
    padding: 0;
    color: #fff;
}
.grid figcaption span:before {
    content: 'by ';
}
.grid figcaption a {
    text-align: center;
    padding: 5px 10px;
    border-radius: 2px;
    display: inline-block;
    background: #ed4e6e;
    color: #fff;
}
.cs-style figcaption {
    height: 85px;
    width: 100%;
    top: auto;
    bottom: 0;
}

页面的整体布局就出来了

然后我们在原有的页面基础上添加hover还有transform，使用translateY给figcaption添加一个translateY为100%高度的偏移;当鼠标移动过来时候，再把translateY的值设置为0，图片就给translateY为-50px高度偏移。

/* Caption Style  */
.cs-style figure {
    overflow: hidden;
}
.cs-style figure img {
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}
.cs-style figure:hover img{
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
}
.cs-style figcaption {
    height: 85px;
    width: 100%;
    top: auto;
    bottom: 0;
    opacity: 1;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
}
.cs-style figure:hover figcaption{
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
}
.cs-style figcaption a {
    position: absolute;
    bottom: 25px;
    right: 20px;
}

之后就大功告成了！！！