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

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

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

用於縮放效果的 CSS3 變換

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

HTML:

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" 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:

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

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

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

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="https://placeimg.com/320/240/nature" class="lazy" 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中文網其他相關文章！