ホバーの画像を拡大

Question

ソーシャルフィードの上にマウスを置いてズームすると、ソーシャルフィードの画像をズームすることができます。

this siteの左の図表フィードに似ています。

私はホバー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>