過渡延遲文本不透明度

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>