我想在图像悬停时出现图像的标题(不一定是真实的标题).文本应该从左到右显示,因此当图像悬停时,它的容器应该在X轴上生长.我已经能够使文本显示在悬停状态,但过渡效果是我被卡住的地方.
这是我尝试过的:
CSS:
.morbid {
display: none;
margin-left:10px;
}
a:hover + .morbid {
position:relative;
display: block;
}
Run Code Online (Sandbox Code Playgroud)
HTML:
<a>
<img src='.../goals/sia.png'>
</a>
<div class="morbid">
This text will appear as you hover your mouse over the image.
</div>
Run Code Online (Sandbox Code Playgroud)
实际上整个div必须增长,文本保持静态,我希望隐藏文本,除非图像悬停.