圖片放大懸停

Question

代碼：https://jsfiddle.net/xakhLafd/

你好，

我想有一個圖像放大懸停和使用的方便轉換。它有效，但它似乎有時會出錯。我試圖通過設置來解決這個問題：

-webkit-transition-property: height,width; 

但無濟於事。此外，我試圖瞭解這個代碼的作者（我從CSS博客獲得了一些代碼）是如何實現這一點的。我瞭解如何懸停圖像改變其寬度，但我不知道爲什麼作者設置負值和左值。我一直試圖編輯寬度，高度，頂部和左側，以便在懸停時獲得所需的大小，但它似乎變得偏斜 - 可能是因爲我不明白負值和負值是做什麼的。任何人都可以對此發光一些？我讀過一些關於負面利潤的文章，但我不明白這裏做了什麼。

下面的代碼：

<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/> 
.thumbnail{ 
    width: 100px; 
    height: 100px; 
} 
.thumbnail:hover { 
    position:relative; 
    top:-50px; 
    left:-35px; 
    width:500px; 
    height:auto; 
    display:block; 
    z-index:999; 
    cursor: pointer; 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease; 
} 

Answer 1

的top:-50px; left:-35px;規則CSS來保持圖像的中心點不變，它放大了。否則，當圖像放大時，您會感覺它被移到右下側。然而，這不是一個好的設計 - 寬度/高度的變化需要在每個動畫幀上計算新的佈局和重繪UI元素，這是非常昂貴的（你可以檢查這個SO重新繪製和迴流之間的區別）。這就是爲什麼你覺得「它似乎有時會出錯」。

更好的方法是使用transform。請檢查修復問題的jsfiddle。新的CSS代碼是：

.thumbnail{ 
    width: 100px; 
    height: 100px; 
    display:block; 
    z-index:999; 
    cursor: pointer; 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease; 
} 
.thumbnail:hover { 
    transform: scale(5); 
} 

Answer 2

這裏是修復該問題，我創建了小提琴。我擺脫了相對位置並將高度設置爲auto而不是100px。

這裏是我做的代碼。

<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" 
class="thumbnail"/> 

.thumbnail{ 
    width: 100px; 
    height: auto; 
    position:relative; 
} 
.thumbnail:hover { 
    width:500px; 
    height:auto; 
    display:block; 
    z-index:999; 
    cursor: pointer; 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease; 
} 

很抱歉忘了更新這裏的小提琴是新的鏈接。

https://jsfiddle.net/xakhLafd/1/