过渡延迟文本不透明度

Question

我有一个带图片的div。

悬停时，我想放大图像并在div旁边显示一些文本。

我想在第一个过渡（使图像变大）结束后显示文本。

我已经尝试了很多方法，但是没有找到任何解决方案，这是我的最后尝试：

 .width-12 { width: 100%; height: 100%; } .change-hover { width: 10%; transition: all 1s; float: left; } .show-hover { display: none; text-align: left; opacity: 0; transition: opacity 0s; } .discover-no-hover:hover .change-hover { width: 24%; float: left; } .discover-no-hover:hover .show-hover { display: block; opacity: 1; transition-delay: 1s; } 

 <div class="width-12 discover-no-hover"> <div class="box small bkg-white"> <div class="feature-column medium mb-50 center hover-align"> <div class="iconcool"> <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Carr%C3%A9_rouge.svg" alt="" class="img-responsive change-hover"> </div> <div class="show-hover"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper varius elit, at efficitur lorem bibendum ac. Nulla feugiat, orci et laoreet vehicula, turpis ligula venenatis diam, bibendum porttitor odio leo ut enim. Aenean pretium tristique mattis. Maecenas ullamcorper iaculis ornare. Ut vitae luctus purus. Suspendisse tincidunt, lorem quis ultrices varius, turpis turpis pellentesque ante. </div> </div> </div> </div> 

JSfiddle适合那些不喜欢该片段的人

如何仅在图像停止增长后才显示文本？ （或者在1秒之后，图像的增长时间是多少）？

谢谢 ！

Answer 1

你有

.show-hover {

    display: none;
    text-align: left;
    opacity: 0;
    transition: opacity 0s; /* this*/
}

只是修改为

transition: 0s opacity 1s;

 .width-12 { width: 100%; height: 100%; } .change-hover { width: 10%; transition: all 1s; float: left; } .show-hover { display: block; text-align: left; opacity: 0; transition: 0s opacity 1s; } .discover-no-hover:hover .change-hover { width: 24%; float: left; } .discover-no-hover:hover .show-hover { display: block; opacity: 1; transition-delay: 1s; } 

 <div class="width-12 discover-no-hover"> <div class="box small bkg-white"> <div class="feature-column medium mb-50 center hover-align"> <div class="iconcool"> <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Carr%C3%A9_rouge.svg" alt="" class="img-responsive change-hover"> </div> <div class="show-hover"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper varius elit, at efficitur lorem bibendum ac. Nulla feugiat, orci et laoreet vehicula, turpis ligula venenatis diam, bibendum porttitor odio leo ut enim. Aenean pretium tristique mattis. Maecenas ullamcorper iaculis ornare. Ut vitae luctus purus. Suspendisse tincidunt, lorem quis ultrices varius, turpis turpis pellentesque ante. </div> </div> </div> </div>