图像库上的多个CSS过渡

Question

我试图结合以下两个概念;但是，我不确定如何继续。第一个是图像库，它在每个图像上执行缩放转换。我希望有一个隐藏的文本元素，它在悬停时显示（在比例之后）。

总而言之，每个图像元素都有两个部分（图像和文本）。没有鼠标悬停，只显示图像。在悬停时，图像被缩放并显示文本。我怎么去组合？我希望这完全在CSS3或SCSS中完成。

悬停过渡的图片库：

＆＃13;

＆＃13;

path

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

文字元素：

＆＃13;

＆＃13;

<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>

＆＃13;

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}

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

文本绝对定位（相对于包含div），以避免影响.div-table的flexbox布局，这是因为绝对定位的元素从文档流中取出所以赢得了＃39 ; t更改包含元素的宽度。 left: 100%;用于使文字显示在图片的右侧。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;