我试图结合以下两个概念;但是，我不确定如何继续。第一个是图像库，它在每个图像上执行缩放转换。我希望有一个隐藏的文本元素，它在悬停时显示（在比例之后）。
总而言之，每个图像元素都有两个部分（图像和文本）。没有鼠标悬停，只显示图像。在悬停时，图像被缩放并显示文本。我怎么去组合？我希望这完全在CSS3或SCSS中完成。
悬停过渡的图片库：
path.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}
答案 0 :(得分：0)
让一个过渡到另一个过渡的关键是使用transition-delay。通过将延迟设置为1s，可以在图像转换发生后显示文本的转换。
文本绝对定位（相对于包含div），以避免影响.div-table的flexbox布局，这是因为绝对定位的元素从文档流中取出所以赢得了＃39 ; t更改包含元素的宽度。 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>