CSS悬停效果放大问题

Question

我找到了一个很好的教程，可以让我的图像在悬停时放大（比如缩放效果）。我的需求和教程之间的主要区别是，我希望我的所有图像都包含在一个类似盒子的容器中。因此，当我实现教程时，我意识到当你悬停时，放大图像的一部分会被剪掉。效果被约束到容器。我想要一种缩放的方式，它可以放在页面上需要放的任何地方。（这样你就可以看到整个放大的图像）以下是我对教程的实现：http://mulnix.contestari.com/wp/example225/1.php

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

Answer 1

移除溢出：隐藏和所有其他溢出，
而不是为您的图像容器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>

Answer 2

这并不完美，但它只是一个开始。我将包装中的overflow:hidden;更改为visible。我还把你的代码放入jsfiddle中，这样人们就可以对它进行修改

http://jsfiddle.net/m8FXH/

Answer 3

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

这里有一个例子，你可以看到它是如何工作的。希望这会有所帮助。

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

Answer 4

我建议给您的div一个以下类：

• 左栏的集合
• 右栏的颜色偏冷
• 最上面一排的
• rowbottom为最下面一行的

然后为它们分配以下属性

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

（分别）

这将使缩放朝着所需的方向进行。

伊万·斯托达德改良小提琴