html鼠标移上去变色放大,CSS3 鼠标滑过图片突出放大效果 | 腾讯云

今天给大家分享一款简单实用的CSS3鼠标滑过图片放大特效，我们可以将它应用在相册中，或者是轮播展示的图片中，这样可以将鼠标移到图片上进行快速预览图片。同时你也可以在此基础上扩展它，比如给图片加投影和边框等。整一个图片放大特效还是比较酷的。

这里我们只用纯CSS实现！没错，没有一句JavaScript语句。也没有依赖关系。就是普通CSS。但在写代码之前，我们要做的就是：

悬停在上面的卡应该在保持长宽比的同时展开。

当一张牌悬停时，其他牌不应改变大小并向外移动，以免彼此重叠。

所有的牌应该保持垂直居中。

听起来不错吧？现在让我们开始带大家一步步写代码。

一、HTML和flexible元素

让我们先设置一行预览的图像。其中包括：

包含多个.item元素的.container父元素容器

每个.item元素都包含一个包装在锚标记中的图像

将.container转换为一个flex容器，该容器将行中的项对齐

设置.item类的flex行为，使它们在行中占用相等的空间

HTML代码如下：