CSS如何在網頁上實現「懸停縮放圖片」效果教學

7 月 18, 2024 | CSS | 0 comments

大家好！今天我們來聊聊一個非常酷炫的網頁效果——「懸停縮放圖片效果」。這個效果可以讓你的圖片在滑鼠懸停時自動放大，增強視覺吸引力。無論你是初學者還是有經驗的前端開發者，都可以輕鬆上手。現在就讓我們一起來看看如何實現這個效果吧！

css hover image 懸停縮放圖片

步驟 1：準備你的 HTML 和 CSS

首先，我們需要準備基本的 HTML 和 CSS。這裡有一個簡單的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懸停縮放圖片效果</title>
    <style>
        .image-container {
            overflow: hidden;
            border-radius: 18px;
            width: 500px; /* 根據需要調整寬度 */
            height: 300px; /* 根據需要調整高度 */
        }

        .image-container img {
            aspect-ratio: 283/183;
            width: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .image-container:hover img {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="https://res.cloudinary.com/citiar/image/upload/v1611200963/samples/animals/three-dogs.jpg" alt="可愛的小狗">
    </div>
</body>
</html>

步驟 2：添加基本的 CSS 樣式

我們使用了一個名為 .image-container 的容器來包裹圖片。這個容器設定了 overflow: hidden 來確保圖片放大時不會超出邊界，並使用了 border-radius: 18px 來增加圓角效果。圖片本身設定了 aspect-ratio 和 object-fit: cover 來確保圖片顯示的比例和樣式。

步驟 3：實現懸停縮放效果

這是最關鍵的一步，我們通過添加 transition: transform 0.3s ease 和 transform: scale(1.1) 來實現圖片在懸停時放大的效果。當滑鼠懸停在圖片上時，圖片會平滑地放大到 1.1 倍。

完成！

就是這麼簡單！只需要幾行代碼，你就能實現一個酷炫的「懸停縮放圖片效果」。這個效果不僅可以提升網頁的視覺吸引力，還可以讓你的圖片展示更加生動有趣。

希望這篇教學文章對你有所幫助！如果有任何問題或建議，歡迎在下方留言。快去試試看，讓你的網頁更加炫酷吧！

DEMO效果成品展示

See the Pen
Hover Zoom Image Effect by Leon Cheng (@jq153387)
on CodePen.