ズーム効果はどのようにして得られますか？

Question

私はホバリング効果をここのようなものにするにはどうすればいいですか？あなたがイメージを動かすとき、私はそれを意味する。 Link to a page with desired effect

Answer 1

次のプロパティを使用することができます。

.item:hover img { 
    -moz-transform: scale(2.0); 
    -webkit-transform: scale(2.0); 
    transform: scale(2.0); 
} 

それが上の推移いるときに、画像への影響でズームを行います。 目的の効果を達成するためにパラメータを変更できます。

Answer 2

あなたが望むものへの類似した、これを見てすることができます

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
p { 
 
    background-color: black; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    color: white; 
 
    line-height: 100px; 
 
} 
 
img:hover { 
 
-moz-transform: scale(2.0); 
 
    -webkit-transform: scale(2.0); 
 
    transform: scale(2.0); 
 
} 
 
img { 
 
    height:100px; 
 
    width: 100px; 
 
    transition: all .2s ease-in-out; 
 
    opacity: 0.5; 
 
}

<div> 
 
    <p>Text</p> 
 
    <img src="https://placeimg.com/640/480/any"> 
 
</div>