將鼠標懸停在縮放圖像上

Question

如何在我的社交Feed中將圖像懸停在其上時進行縮放。

類似於this site左邊的instagram feed。

我在懸停的CSS嘗試這樣做：

opacity: 0.5; 
filter: alpha(opacity=50); 

，但我不能把它放大。

Answer 1

一下添加到：懸停：

transform: scale(1.5); 

Answer 2

您可以使用此。

.item { 
 
    position: relative; 
 
    
 
    border: 1px solid #333; 
 
    margin: 2%; 
 
    overflow: hidden; 
 
    width: 540px; 
 
} 
 

 
.item img { 
 
    width: 500px; 
 
    -moz-transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 
.item:hover img { 
 
    -moz-transform: scale(1.1); 
 
    -webkit-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
}

<div class="item"> 
 
    <img src="http://www.joshuacasper.com/contents/uploads/joshua-casper-samples-free.jpg" alt="pepsi" width="540" height="548"> 
 
    
 
    
 
</div>