过渡延迟文本不透明度

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 对于那些不喜欢片段的人

怎样才能让文字只在图像停止增长后才出现？ （或者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>