將鼠標懸停在圖像上進行縮放和模糊

Question

我想在將鼠標懸停在圖像上時縮放並模糊圖像。我正在嘗試下面的代碼，它以某種方式在Chrome上工作（不平滑過渡，不知道爲什麼），但在FF或IE上不起作用，儘管我已經讀過這些模糊應該適用於這些瀏覽器。

而且我的另一個問題是，是否有可能從中心而不是左上角縮放圖像，因爲它在本例中的作用：

Demo Link

下面的代碼：

HTML：

<div class="grow"> 
    <img src="image.jpg" /> 
</div> 

CSS：

.grow{ 
    width: 300px; 
    height: 300px; 
    overflow: hidden; 
} 

.grow img { 
    height: 300px; 
    width: 300px; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
     -o-transition: all 1s ease; 
     -ms-transition: all 1s ease; 
      transition: all 1s ease; 

    filter: blur(0); 
    -webkit-filter: blur(0); 
    -moz-filter: blur(0); 
    -o-filter: blur(0); 
    -ms-filter: blur(0); 
    -ms-filter: blur(0px); 
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); 


} 

.grow img:hover { 
    width: 400px; 
    height: 400px;  
    filter: blur(5px); 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: url(blur.svg#blur); 
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); 
} 

Answer 1

添加負利潤率保持居中圖像：

.grow img:hover {margin:-50px 0 0 -50px;} 

或更好使用transform:scale（由Paulie_D的建議），以放大它，因爲這使用中心點作爲默認轉換的原點。

.grow img:hover {transform: scale(1.33);} 

僅供參考。 filter: url(blur.svg#blur);停止它在Firefox中爲我工作，因爲該文件不存在於您的小提琴中的該URL。

更新： FF中增加了工作模糊。

參見：Updated Fiddle using transform:scale and working blur。

Answer 2

有在你的代碼中的一些錯誤，而無效

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); 

你應該離開，對於一個單獨的，即特定的樣式表。

---

這裏是一個更新的jsfiddle我擺脫震盪的過渡，以及http://jsfiddle.net/XR32V/3/

Answer 3

你可以使用的transform:scale和transform-origin而不是改變圖像寬度。

參見：JSFiddle Demo

.grow img:hover { 
    -webkit-transform: scale(1.33); 
    -webkit-transform-origin: 50% 50%; 
    /* add other prefixes as required /* 

    filter: blur(10px); 
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px); 
    -o-filter: blur(10px); 
    -ms-filter: blur(10px); 
    filter: url(blur.svg#blur); 

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); 

} 

Answer 4

簡單的JS插件變焦和模糊的圖像時，它懸停

Get the Plugin