文字从左到右出现

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

在要添加转场效果的元素上使用transition属性。

制作字幕成长和尺寸的缩小：

CSS：

.morbid { 
    /* display: none; */ 
    margin-left:10px; 
    opacity: 0; 
    font-size: 12pt; 
    -webkit-transition: font-size 0.25s; 
    transition: font-size 0.25s; 
} 

a:hover + .morbid { 
    position:relative; 
    /* display: block; */ 
    font-size: 16pt; 
    opacity: 1; 
} 

HTML：

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

我不得不改变opacity为标题，而不是改变display属性，因为更改显示属性时不显示动画。

Answer 2

您无法转换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://lorempixel.com/400/200'> 
 
</a> 
 
<div class="morbid"> 
 
    This text will appear as you hover your mouse over the image. 
 
</div>

---

另外，如果您希望文本从中心生长，那么你可以使用绝对定位与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://lorempixel.com/400/200'> 
 
    </a> 
 
    <div class="morbid"> 
 
    This text will appear as you hover your mouse over the image. 
 
    </div> 
 
</div>