1

我找到了一个很好的教程，可以让我的图像在悬停时放大（如缩放效果）。我的需求和教程之间的主要区别是我希望我的所有图像都包含在一个像容器一样的盒子中。因此，当我实施本教程时，我意识到当您悬停时，放大图像的一部分会被截断。效果受限于容器。我想要一种方法让缩放可以到达页面上任何需要去的地方。（所以你可以看到整个放大的图像）这是我的教程实现：http: //mulnix.contestari.com/wp/example225/1.php

JSFiddle：http: //jsfiddle.net/dsRAH/ Original Code

4

4 回答 4

2

删除溢出：隐藏和所有其他溢出，
而不是为您的图像容器 DIV 删除float:left;和添加display:inline-block;

* {
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  position: relative;
  background: #000;
  color: #fff;
  z-index: 0;
}

.photos {
  position: relative;
  display: flex;
  flex-flow: row wrap;
}

.photo {
  box-shadow: 0 0 0 2px  #444;
  margin: 5px;
  position: relative;
  max-height: 200px;
  transform: translateZ(0);
  transition: transform 0.5s;
}

.photo:hover {
  z-index: 1;
  transform: translateZ(0) scale(1.6);
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-legend {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1em;
  background: rgba(0,0,0,0.3);
}
<div class="wrapper">
  <div class="photos">
    <div class="photo">
      <img src="https://placehold.it/200x150/0bf" />
      <div class="photo-legend">TEST DESCRIPTION</div>
    </div>
    <div class="photo">
      <img src="https://placehold.it/200x200/f0b" />
    </div>
    <div class="photo">
      <img src="https://placehold.it/200x150/bf0" />
    </div>
  </div>
</div>

于 2013-08-28T19:52:01.817 回答
1

您可以尝试使用 z-index。z-index 较大的元素总是在 z-index 较低的元素之前。如果你的主容器没有溢出：隐藏，你可以试试这个。

这是一个示例，您可以在其中看到它是如何工作的。希望这会有所帮助。

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

于 2013-08-28T18:30:06.040 回答
1

这并不完美，但它是一个开始。我将overflow:hidden;包装器中的 更改为visible. 我还将您的代码放入 jsfiddle，以便人们可以修改它。

http://jsfiddle.net/m8FXH/

于 2013-08-28T18:43:26.110 回答
1

我建议为您的 div 提供以下课程之一：

  • colleft 用于左列的那些
  • 为右栏中的那些设置颜色
  • rowtop 用于顶行的那些
  • rowbottom 用于底行的那些

然后为它们分配以下属性

.colleft {
    transform-origin-x: 0%;
}

....

    transform-origin-x: 100%;
    transform-origin-y: 0%;
    transform-origin-y: 100%;

（分别）

这将使变焦朝着所需的方向前进。

埃文斯托达德修改小提琴

于 2013-08-28T18:46:02.397 回答