如何实现缩放效果?

How to achive that zooming effect?

请问如何实现像这里这样的悬停效果?我的意思是当您将鼠标悬停在图像上时。 Link to a page with desired effect

您可以使用以下 属性 :

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

这将使鼠标悬停在图像上时产生放大效果。 您可以改变参数以获得所需的效果。

你可以看看这个,和你想要的差不多:

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>