今天给大家介绍一个运用CSS3实现的Hover动画特效
效果预览：

[示例演示]

类似这样的特效可以应用在图片展示的场景，例如图片墙，相册等，从而提高用户体验让我们的网站变得高大上。
下面我们通过一段视频来了解下这样的效果是如何实现的。
教学视频：

相信大家通过视频已经了解到这个效果是如何实现的了，是不是很简单？下面为大家总结一下这个特效涉及到的知识点，以便大家系统的学习：
1.定位问题
position规定元素的定位类型
absolute： 绝对定位（相对于static 定位以外的第一个父元素定位）
fixed：绝对定位（相对于浏览器窗口定位）
relative：相对定位（相对于其正常位置定位）
static：默认值（无定位）
inherit 从父元素继承

2.rgba设置颜色
语法：rgba(R,G,B,A)
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间
rgba可用于设置背景色，字体颜色，边框颜色等,可设置颜色的地方。

rgba透明度与opacity的区别：
这里主要应用透明度的属性，虽然平时我们也可以使用opacity来设置透明度，但是这两个是有很大差别的。opacity是给元素设置透明度，其子元素也同样会有透明度。

使用场景举例：
我们经常会遇到一种场景就是背景是半透明的，但是上面的文字不是透明的。以前我们的实现方式大概是利用绝对定位，一层半透明，一层不是透明的叠加在一起。现在直接可以利用rgba的透明度来实现是不是简单很多？

3.box-sizing
语法：box-sizing: content-box|border-box|inherit;
content-box：默认值。宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit：规定应从父元素继承 box-sizing 属性的值。

使用场景举例：
当我们给div设置width:100%并且添加了固定大小的padding值，这时就会超出父元素的宽度，如果其父元素是body就会出现横向的滚动条。此时我们可以使用box-sizing:border-box来解决，因为无论你的padding值为多少，元素的框盒就等于父类的宽度，只是内容宽度和高度会变化。

4.CSS3动画
关于CSS3动画的学习和技巧，我们之前有一节视频教程专门为大家进行了详细的介绍[快去学习吧]

举一反三：
通过以上的讲解大家看看下面的动画该如何实现呢？

[示例演示]