如何僅使用 CSS3 變換建立懸停圖片縮放效果？

使用CSS3 Transform 實現懸停時的CSS 影像縮放效果

使用CSS3 的轉換屬性可以輕鬆實現創建放大影像的懸停效果。此方法需要最少的程式碼，並提供流暢的視覺增強效果，無需複雜的表格或遮罩 div。

實作

要建立縮放效果，請依照下列步驟操作：

1. HTML:

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Your image">
    </div>
</div>

HTML:

將圖片放入容器內元素。

.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 樣式來控制圖片縮放。

過渡屬性定義了縮放效果的持續時間和緩動函數。

變換：當遊標停留在容器上時，scale() 屬性會縮放影像。

範例

請參考以下範例小提琴： https://jsfiddle.net/rkd3x4uc/

• 注意：

縮放屬性，直接對影像進行縮放，僅在網路上支援探險家。為了實現跨瀏覽器相容性，transform:scale() 屬性是首選。 要將縮放後的映像限制在容器的邊界內，您可以將 Overflow:hidden 新增至 .image 類別。

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