html - 尺寸可变的CSS悬停图像裁剪

Question

我正在建立一个类似画廊的页面，其中带有方形框，当您将鼠标悬停在上方时，这些框会展开以显示整个图像。可以看到演示here.

在演示过程中，我遇到了两个问题，即1）过渡不适用于宽度：自动，以及2）在尝试对高图像（高度>宽度）实施时，我不确定如何可以使宽度保持恒定，使高度增加，就像第一个示例中的高度保持恒定和宽度增加一样。

这是我的（工作）示例代码：

的HTML

<div class="piece">
  <div class="crop">
    <img class="image">
  </div>
</div>

的CSS

.piece {
  display: flex;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 
  0 1px 2px rgba(0,0,0,0.24);
  margin: 1em;
  width: 12em;
  height: 12em;
}
.crop {
  background: white;
  position: absolute;
  overflow: hidden;
  width: 12em;
  display: flex;
  height: 12em;
  justify-content: center;
}
.piece:hover > .crop {
  width: 18em;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25),
  0 10px 10px rgba(0,0,0,0.22);
  padding: 1em;
  margin: -1em 0;
}
.image {
  content:url("http://studio222.ca/graphics/FRONT%20PAGE%20%20201P0917.JPG");
  max-height: 100%;
}
div {
  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}

有任何想法吗？

Answer 1

除了使用height / width，top / bottom属性之外，还可以轻松制作动画，而不是使用right / left。使用右/左动画宽度，使用上/下动画高度。

这是一个例子：

.piece {
  display: flex;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 
  0 1px 2px rgba(0,0,0,0.24);
  margin: 1em auto;
  width: 12em;
  height: 12em;
  position:relative;
}
.crop {
  background: white;
  position: absolute;
  overflow: hidden;
  top:0;
  bottom:0;
  right:20%;
  left:20%;
  display: flex;
  height: 12em;
  justify-content: center;
}
.piece:hover > .crop {
  right:-50%;
  left:-50%;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25),
  0 10px 10px rgba(0,0,0,0.22);
  padding: 1em;
  margin: -1em 0;
}
.image {
  width:400px;
}
div {
  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}

<div class="piece">
  <div class="crop">
    <img class="image" src="https://lorempixel.com/400/400/">
  </div>
</div>