转换延迟文本不透明

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>