如何实现这种缩放效果？ [关闭]答案

【问题标题】：How to achive that zooming effect? [closed]如何实现这种缩放效果？ [关闭]
【发布时间】：2017-07-12 18:34:22
【问题描述】：

我想问一下如何才能实现像这里这样的悬停效果？我的意思是当你悬停图像时的那个。 Link to a page with desired effect

【问题讨论】：

【解决方案1】：

您可以使用以下属性：

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

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

【讨论】：

【解决方案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>

【讨论】：

好的，太好了 :D 我怎样才能添加文本？例如悬停部分上的“lorem ipsum”？就像在这个页面上一样:)
@Atomix 更新了文本代码