轉換延遲文本不透明

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 for those who don't like the snippet

我怎麼能只有在圖像停止增長後，文本纔會出現？ （或1s後，這是圖像增長的持續時間）？

謝謝！

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>