过渡延迟文本不透明度

Question

I have a div with an image.

On hover, I want to make the image bigger and to display some text next to the div.

I want to show the text once the first transition (make the image bigger) has ended.

I've tried a lot of things but did not manage to find any solution, here is my last try :

 .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

How can I make the text appear only after the image stopped growing ? (Or after 1s, wich is the duration of the image growing)?

Thank you !

Answer 1

You have

.show-hover {

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

Just amend this to

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>