我试图结合以下两个概念;但是,我不确定如何进行。第一个是图片库,它对每个图像执行比例转换。我想要一个隐藏的文本元素,它在悬停时显示(在比例之后)。
所以总而言之,每个图像元素都有两部分(图像和文本)。如果没有鼠标悬停,则只显示图像。悬停时,图像会缩放并显示文本。我将如何结合?我希望这完全在 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>
最佳答案
让一个过渡在另一个过渡之后播放的关键是使用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>
关于html - 图片库中的多个 CSS 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50555497/