如何使用 CSS 建立懸停圖片縮放效果？-css教學-PHP中文網

如何使用 CSS 建立懸停圖片縮放效果？

Linda Hamilton

發布： 2024-12-04 15:00:22

原創

126 人瀏覽過

How to Create an Image Zoom Effect on Hover Using CSS?

使用 CSS 在懸停時對圖像進行縮放效果

在 Web 開發中，在滑鼠懸停時對圖像應用縮放效果是常見的設計元素。讓我們來探索使用 CSS3 變換的解決方案。

用於縮放效果的 CSS3 變換

CSS3 變換屬性和 scale() 函數允許對圖像進行縮放效果。下面是一個程式碼片段：

HTML:

<div class="thumbnail">
    <div class="image">
        <img src="image.jpg" alt="Image">
    </div>
</div>

登入後複製

CSS:

.thumbnail {
    width: 320px;
    height: 240px;
}

.image {
    width: 100%;
    height: 100%;
}

.image img {
    transition: all 1s ease;
}

.image:hover img {
    transform: scale(1.25);
}

登入後複製

CSS:

在此範例中， image div 包含圖像。當影像懸停時，使用scale()函數將影像放大1.25倍。過渡屬性確保平滑的縮放動畫。
附加說明

您可以調整比例值以達到所需的縮放等級。

CSS 溢位：隱藏可以套用於映像 div 以隱藏縮放影像的任何溢出部分。

<div class="thumbnail">
    <div class="image">
        <img src="https://placeimg.com/320/240/nature" alt="Image">
    </div>
</div>

<style>
    .thumbnail {
        width: 320px;
        height: 240px;
    }

    .image {
        width: 100%;
        height: 100%;
    }

    .image img {
        transition: all 1s ease;
    }

    .image:hover img {
        transform: scale(1.25);
    }
</style>

登入後複製

IE 支援縮放屬性，但其他版本不支援瀏覽器。示範這是現場示範：

以上是如何使用 CSS 建立懸停圖片縮放效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！