CSS 过渡，其中缩放的图像与整个图像库重叠答案

【问题标题】：CSS Transition in which a zoomed image overlaps the whole image galleryCSS 过渡，其中缩放的图像与整个图像库重叠
【发布时间】：2018-02-28 15:16:30
【问题描述】：

我正在尝试在图片库上执行 CSS3 过渡和叠加，并希望在确定如何正确控制效果方面获得一些帮助。看来我需要根据位置将 8 个图像分成 4 个稍微不同的 div 包装器（左上角图像需要向右和向下增长 200%，右上角图像需要增长 200% 到左下等）。我的目的是消除屏幕或其他容器/元素的剪切。

每张图片都应扩大并覆盖相邻的 3 张图片，以免其他部分中的其他元素发生剪裁或剪裁掉窗口的范围。图像和文本覆盖都应该发生这种情况（文本覆盖暂时禁用）。

我能否就如何实现这种效果提出一些建议？

以下只是我尝试做的一个非常简单的示例。（我似乎也不明白如何在过渡期间保持行位置。）

<!DOCTYPE html>
<html>
<head>
<style> 
    .div-table{
      display:table;
      width: auto;
    }
    div {
      width: 100px;
      height: 100px;
      position: relative;
      display: inline-block;
      -webkit-transition-property: width, height; /* For Safari 3.1 to 6.0*/
      -webkit-transition-duration: 4s; /* For Safari 3.1 to 6.0 */
      transition-property: width, height;
      transition-duration: 4s;
    }
    div:hover {
      position:absolute;
      z-index: 10;
      width: 425px;
      height: 425px;
    }
</style>
</head>
<body>

  <h1>My Gallery of Color Boxes</h1>

  <p>Hover over the element below, and it will expand to cover the other 
     elements in the table</p>
  <div class="div-table">
        <div style="background:red; "></div>
        <div style="background:green;"></div>
        <div style="background:purple;"></div>
        <div style="background:blue;"></div>
  </div>    
  <div class="div-table">
        <div style="background:black;"></div>
        <div style="background:yellow;"></div>
        <div style="background:brown;"></div>
        <div style="background:orange;"></div>
   </div>

</body>
</html>

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

我尝试使用scale() 转换

Codepen demo

块的基本放置是通过 Flexbox 完成的。当您悬停div 时，transform: scale(4, 2) 属性会将块拉伸4 乘以它的宽度和2 乘以它的高度。结果，整个外部元素将被覆盖。

如果您需要在高度上拉伸更多，请更改scale() 的第二个^nd 值。所有其他未悬停的块将站在它们的位置。

当然，您需要为每个块设置正确的transform-origin 属性。

标记

<div class="div-table">
    <div style="background:red; "></div>
    <div style="background:green;"></div>
    <div style="background:purple;"></div>
    <div style="background:blue;"></div>
    <div style="background:black;"></div>
    <div style="background:yellow;"></div>
    <div style="background:brown;"></div>
    <div style="background:orange;"></div>
</div>

CSS

.div-table {
    display:flex;
    flex-wrap: wrap;
    width: 400px;
}

.div-table div {
    flex: 0 0 100px;
    height: 100px;
    transition: 1s transform;
}

.div-table div:hover {
    z-index: 2;
    transform: scale(4, 2);
}


.div-table div:nth-child(1) { transform-origin : 0 0; }
.div-table div:nth-child(2) { transform-origin : 33.3% 0; }
.div-table div:nth-child(3) { transform-origin : 66.6% 0; }
.div-table div:nth-child(4) { transform-origin : 100% 0; }
.div-table div:nth-child(5) { transform-origin : 0     100%; }
.div-table div:nth-child(6) { transform-origin : 33.3% 100%; }
.div-table div:nth-child(7) { transform-origin : 66.6% 100%; }
.div-table div:nth-child(8) { transform-origin : 100%  100%; }

手动计算所有transform-origin 可能很乏味，因此为方便起见，您可以使用基于行和列数量的几个嵌套 for 循环通过 SASS 生成它们，就像我在这个SassMeister snippet

/* =============== */
$rows    : 2;
$columns : 4;
/* =============== */

$imagecounter : 1;    
@for $i from 1 through $rows {
  @for $j from 1 through $columns {
    div:nth-child(#{$imagecounter}) {
      transform-origin: 
        100%/($columns - 1) * ($j - 1)
        100%/($rows - 1) * ($i - 1);
    }
    $imagecounter : $imagecounter + 1;
  }
}

这是另一个带有方形图像的实际图片库示例

Codepen demo

在这个演示中，我将变换更改为scale(4, 4)（以保持1:1 的纵横比）和transform-origin 的一些y 坐标

内部图像应用了简单的样式

.div-table img { 
    width: 100%; 
}

这样他们就可以在其父 div 的过渡期间无缝扩展。

最终结果

最后，出于可用性的问题，我想建议在内部div 中插入一个小边距，这样可以更轻松地选择中间的图像网格，特别是如果您计划拥有超过 2 行的图像。

【讨论】：

感谢您的帮助！
@airsoftsoldrecn9 不客气。如果此答案已解决，您可以考虑将其标记为已接受。