[分享]css光标移上去图片放大

CSS可以通过鼠标悬浮在图片上时放大图片的效果。下面是一个具体的例子：

 <div class="zoom">
        <img src="example.jpg" alt="example">
    </div>

    <style>
        .zoom {
            overflow: hidden;
            position: relative;
        }

        .zoom img {
            transition: all 0.5s ease;
            width: 100%;
        }

        .zoom:hover img {
            transform: scale(1.5);
        }
    </style> 

首先需要创建一个容器来包含图片，这里使用了一个div，并加上了一个类名zoom。因为要对图片进行放大与隐藏，所以需要设置overflow属性为hidden；而由于图片要通过绝对定位来实现动画，所以需要将容器的position属性设置为relative。

其次，设置图片的宽度为100%以使图片在容器内等比缩放。

通过:hover伪类来监听鼠标悬浮事件，当鼠标悬浮在容器上时，设置图片的transform属性为scale(1.5)，即放大1.5倍。

这个例子只是基本的放大效果，还可以结合JS实现更多更复杂的交互效果。