css图片悬停放大

基础概念

CSS图片悬停放大是一种常见的网页设计效果，通过CSS实现当鼠标悬停在图片上时，图片会放大显示。这种效果可以增强用户的交互体验，使网页更加生动和吸引人。

类型

简单放大：图片在悬停时按比例放大。
中心放大：图片在悬停时按比例放大，并且保持中心位置不变。
过渡效果：在放大过程中添加平滑的过渡效果。

应用场景

产品展示：在电商网站上展示商品图片时，使用悬停放大效果可以让用户更清楚地看到产品细节。
导航菜单：在导航菜单中使用悬停放大效果，可以突出显示当前选中的菜单项。
图片库：在图片库或相册中，使用悬停放大效果可以让用户在不点击的情况下预览图片。

实现方法

以下是一个简单的CSS示例，展示如何实现图片悬停放大效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Image Hover Zoom</title>
    <style>
        .image-container {
            display: inline-block;
            overflow: hidden;
        }
        .image-container img {
            transition: transform 0.3s ease;
        }
        .image-container:hover img {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="https://via.placeholder.com/300" alt="Sample Image">
    </div>
</body>
</html>