opacité du texte de transition-délai

Question

J'ai une div avec une image.

En survol, je souhaite agrandir l'image et afficher du texte à côté de la div.

Je veux afficher le texte une fois que la première transition (agrandir l'image) est terminée.

J'ai essayé beaucoup de choses, mais n'a pas réussi à trouver une solution, voici mon dernier essai:

.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

Comment puis-je faire apparaître le texte seulement après que l'image ait cessé de croître? (Ou après 1s, quelle est la durée de la croissance de l'image)?

Merci!

Answer 1

Vous avez

.show-hover { 

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

modifiant Tout cela

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>