如何在表格布局中从中心过渡宽度/高度

Question

我有一个灵活的项目布局，可以模仿桌子的外观。这个想法是要显示所有这些内容，但是当您将鼠标悬停时，悬停的项目需要在所有4个方向上展开，与其他项目重叠，同时保持居中。当鼠标离开项目时，它应该折叠回其原始大小。但是，在鼠标进入和鼠标离开时，过渡都应该平滑。我可以将其与鼠标一起使用，但无法弄清楚如何在鼠标移出时使其平滑。

您将在下面的示例中看到鼠标移出不平滑，因为它失去了索引值，没有该索引值，我将无法使其重叠。还有另一种方法吗？也欢迎Javascript解决方案，但不是首选方案。

似乎当我将html / css粘贴到SO中时，悬停根本不起作用。至少在我的浏览器上，所以我要留下一个js小提琴链接，您可以在其中看到我的问题。只需注意，当鼠标离开该框时，它会丢失z-index值，因此该框的右侧位于下一个框的后面，而左侧保持在顶部并可以正确过渡。

这里是JS小提琴链接：https://jsfiddle.net/1gr036k5/1/

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  max-width: 1000px;
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.wrapper div {
  width: 25%;
  height: 200px;
  background-color: red;
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.wrapper.two div span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  background-color: blue;
  opacity: 0;
  transition: all 1s ease;
}

.wrapper div:hover {
  z-index: 3;
}

.wrapper div span:hover {
  opacity: 100%;
  width: 120%;
  height: 120%;
  left: -10%;
  top: -10%;
}

<div class="wrapper">
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
</div>

Answer 1

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  max-width: 1000px;
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper div {
  width: 25%;
  height: 200px;
  background-color: red;
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position:relative;
}

.wrapper div span {
  display: block;
  width: 100%;
  height: 100%;
  position:absolute;
  left:0;
  top:0;
  background-color: blue;
  transition: all 1s ease;
  opacity:0;
}

.wrapper div:hover {
}

.wrapper div:hover span{
 transform: scale(2, 2);
 opacity:1;
 z-index:4;
}

<div class="wrapper">
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
</div>