遷移遅延のテキストの不透明度

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

どのようにすることができますイメージが成長を停止した後にのみテキストを表示させますか？ （または、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>