过渡延迟文本不透明度

Question

我有一张带图片的 div。

悬停时，我想让图像变大并在 div 旁边显示一些文本。

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

我尝试了很多方法，但没有找到任何解决方案，这是我最后一次尝试：

.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>

过渡延迟文本不透明度

transition-delay text opacity

html

css

transition

delay

opacity