css - 文字从左到右出现

Question

我希望在图像悬停时显示图像的标题(真正的标题不是必需的)。文本应该从左到右显示，因此当图像悬停时，它的容器应该在 X 轴上增长。我已经能够让文本出现在悬停时，但过渡效果是我卡住的地方。
这是我尝试过的:

CSS:

.morbid {
  display: none;
  margin-left:10px;
}

a:hover + .morbid {
  position:relative;
  display: block;
}

HTML:

<a>
  <img src='.../goals/sia.png'> 
</a>
<div class="morbid">
This text will appear as you hover your mouse over the image.
</div>

实际上整个 div 必须增长，文本保持静态，我希望隐藏文本，除非图像悬停。

Answer 1

您无法转换 display 属性的值更改。可制作动画的完整属性列表可用 in the spec .

要让内容增长和出现，您需要转换max-width(或width，如果您可以设置固定宽度到元素)就像在下面的代码片段中所做的那样。

.morbid {
  width: auto;
  max-width: 0%;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width 1s linear;
}
a:hover + .morbid {
  max-width: 100%;
}

<a href="#">
  <img src='http://picsum.photos/400/200'>
</a>
<div class="morbid">
  This text will appear as you hover your mouse over the image.
</div>

JSFiddle

---

或者，如果您希望文本从中心开始增长，那么您可以使用 transform 的绝对定位，如下面的代码片段所示。

.container {
  position: relative;
  width: 400px;
}
.morbid {
  position: absolute;
  left: 50%;
  max-width: 0%;
  white-space: nowrap;
  overflow: hidden;
  transform: translateX(-50%);
  transition: max-width 1s linear;
}
a:hover + .morbid {
  max-width: 100%;
}

<div class="container">
  <a href="#">
    <img src='http://picsum.photos/400/200'>
  </a>
  <div class="morbid">
    This text will appear as you hover your mouse over the image.
  </div>
</div>

JSFiddle