html - 图片库中的多个 CSS 过渡

Question

我试图结合以下两个概念；但是，我不确定如何进行。第一个是图片库，它对每个图像执行比例转换。我想要一个隐藏的文本元素，它在悬停时显示(在比例之后)。

所以总而言之，每个图像元素都有两部分(图像和文本)。如果没有鼠标悬停，则只显示图像。悬停时，图像会缩放并显示文本。我将如何结合？我希望这完全在 CSS3 或 SCSS 中完成。

带有悬停过渡的图库:

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

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

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

.div-table div:hover {
  z-index: 2;
  transform: scale(2, 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     33.3%; }
.div-table div:nth-child(6) { transform-origin : 33.3% 33.3%; }
.div-table div:nth-child(7) { transform-origin : 66.6% 33.3%; }
.div-table div:nth-child(8) { transform-origin : 100%  33.3%; }

<div class="div-table">
    <div><img src="https://placeimg.com/400/400/nature" /></div>
    <div><img src="https://placeimg.com/400/400/people" /></div>
    <div><img src="https://placeimg.com/400/400/architecture" /></div>
    <div><img src="https://placeimg.com/400/400/animals" /></div>
    <div><img src="https://placeimg.com/400/400/animals" /></div>
    <div><img src="https://placeimg.com/400/400/sepia" /></div>
    <div><img src="https://placeimg.com/400/400/grayscale" /></div>
    <div><img src="https://placeimg.com/400/400/tech" /></div>
</div>

文本元素:

body {margin:0;}

main {overflow:hidden;}

article{float:left; width:20%; transition:width 2s; min-height:10em; 
padding:1em; box-sizing:border-box;} 
aside {float: left; width:0%; transition:width 2s; min-height:10em; 
   padding:0em; box-sizing:border-box;}
article {clear: left; background:#ffc;}
aside {background:#cff; text-indent:-9999px}

article:hover {height: 10em; width:18%; !important;}
article:hover ~ aside {height: 10em; width:15%; text-indent:10px}

<main>
 <article>
<h1>Main content</h1>
 </article>
 <aside>
  Crouching Tiger, Hidden Text
 </aside>
</main>

Answer 1

让一个过渡在另一个过渡之后播放的关键是使用transition-delay。通过将延迟设置为 1s，一旦图像转换发生，显示文本的转换就会发生。

文本是绝对定位的(相对于包含的div)以避免影响.div-table的flexbox布局，这是因为采用了绝对定位的元素脱离文档流，因此不会改变包含元素的宽度。 left: 100%; 用于使文字出现在图像的右侧。

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

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

.div-table span {
  background: #cff;
  float: left;
  height: 100px;
  left: 100%;
  overflow: hidden;
  position: absolute;
  transition: width 2s;
  transition-delay: 1s;
  width: 0%;
}

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

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

.div-table div:hover span {
  width: 100%;
}

.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 33.3%;
}

.div-table div:nth-child(6) {
  transform-origin: 33.3% 33.3%;
}

.div-table div:nth-child(7) {
  transform-origin: 66.6% 33.3%;
}

.div-table div:nth-child(8) {
  transform-origin: 100% 33.3%;
}

<div class="div-table">
  <div>
    <img src="https://placeimg.com/400/400/nature" />
    <span>Crouching Tiger, Hidden Text</span>
  </div>
  <div>
    <img src="https://placeimg.com/400/400/people" />
    <span>Crouching Tiger, Hidden Text</span>
  </div>
  <div>
    <img src="https://placeimg.com/400/400/architecture" />
    <span>Crouching Tiger, Hidden Text</span>
  </div>
  <div>
    <img src="https://placeimg.com/400/400/animals" />
    <span>Crouching Tiger, Hidden Text</span>
  </div>
  <div>
    <img src="https://placeimg.com/400/400/animals" />
    <span>Crouching Tiger, Hidden Text</span>
  </div>
  <div>
    <img src="https://placeimg.com/400/400/sepia" />
    <span>Crouching Tiger, Hidden Text</span>
  </div>
  <div>
    <img src="https://placeimg.com/400/400/grayscale" />
    <span>Crouching Tiger, Hidden Text</span>
  </div>
  <div>
    <img src="https://placeimg.com/400/400/tech" />
    <span>Crouching Tiger, Hidden Text</span>
  </div>
</div>