Css 文本从左到右显示

我希望在图像悬停时显示图像的标题（不一定是真实的标题）。文本应该从左到右显示，因此当图像悬停时，它的容器应该在X轴上增长。我已经能够使文本显示在悬停状态，但过渡效果就是我被卡住的地方。
这就是我尝试过的：

CSS:

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

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

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

HTML:

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

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

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

将鼠标悬停在图像上时，将显示此文本。

---

实际上，整个

div

必须增长，文本保持静态，我希望文本隐藏，除非图像悬停。

对要添加过渡效果的元素使用

transition

属性

使标题的大小变大或缩小：

CSS:

HTML:

将鼠标悬停在图像上时，将显示此文本。

---

我必须更改标题的

opacity

，而不是更改

display

属性，因为更改display属性时动画不会显示。

您无法转换

display

属性的值更改。可以设置动画的特性的完整列表可用

要使内容增长并显示，您需要转换

最大宽度

（或

宽度

，如果您可以为元素设置固定宽度），如下面的代码段中所述

。病态的{
宽度：自动；
最大宽度：0%；
空白：nowrap；
溢出：隐藏；
过渡：最大宽度1s线性；
}
答：悬停+。病态{
最大宽度：100%；
}

将鼠标悬停在图像上时，将显示此文本。

谢谢。但是我希望div从下面开始增长，而不是不透明度。@user3769239:如果您希望文本的div增长，那么您需要像我的回答中提到的那样转换宽度。或者，你只是想让文本增长？如中所示，只有文本的大小要增加？实际上整个div必须增加，文本保持静态，我希望文本被隐藏，除非图像是静态的hovered@user3769239好的，在这种情况下，您需要转换宽度或最大宽度（上面我的答案中有示例）为什么不接受答案？

display

不是其中之一