首先我们来看一下实现的效果,纯CSS3实现的鼠标指上动效如下图：

css样式代码如下：  

HTML代码结构如下：

1.  

6. BEATIFUL DAY

7. Description goes here

12.  

这个效果用到的知识点：
1、 css定位概况（对边框蒙层定位）
2、 通过rgba(红、绿、蓝、透明的)设置颜色
3、 CSS3动画，2D或3D转换 ：transform
4、 CSS3动画平滑过渡：transition
小知识点解析：
（1）首页这里我们会用到把文字简介部分info左右垂直居中，左右居中text-align: center;而垂直居中可以通过绝对定位top:50%,或是margin-top:50%;然后再用transform:translateY(-50%)（元素自身上浮50%）

（2）关于border样式的设置，box-sizing:border-box;就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。