css3商品图片放大并出现黑色半透明遮罩和文字

1、创建外层div和商品图片。

3、运行，查看效果。可以看到，图片在div的上面，并且于div一样大。

5、运行，查看动画效果。可以看到，此时的图片是以图片中心放大，而超出了div的范围。那么我们接下来解决这一问题。

7、运行，查看动画效果。可以看到当鼠标移上去时，图片慢慢放大，但大小始终不变，就是div的大小，那么此时外层的div就起到了相框的效果。

9、1.为外层div添加作为父元素的相对定位属性。2.为遮罩设置样式及动画。3.为文字设置样式及动画。如图，部分属性有注释，并解释了动画效果。

11、此动画的时间轴如下，可以更好的理解此动画的时间设置。可以根据自己的脑洞，来设置出更高级的动画效果。