непрозрачность текста с задержкой перехода

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>