CSS之鼠标动画

     先看下效果图：

      首先，我们从效果图上可以看出来我们要做的动画特性，当鼠标放到图片上时，我们的图片会放大，并且图片下方的阴影和字都会消失。

       图片是圆角的，字的背景颜色呈现半透明状态。

       效果图给我们的直观感受大概就是这些，现在我们一步步来看看制作这个效果的过程。

       第一步：我们选择四个图片，用无序列表来放置。并给图片上加上文字。

        html代码：

   <li><img src="img/woman.jpg" alt=""><span>千年之恋</span></li>
   <li><img src="img/man.jpg" alt=""><span>千年之恋</span></li>
   <li><img src="img/mountain.jpg" alt=""><span>千年之恋</span></li>
   <li><img src="img/flower1.jpg" alt=""><span>千年之恋</span></li>

       你会发现，图片的大小不一样，我们给图片设置同样的宽度