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，如果您可以为元素设置固定宽度），如下所示片段。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 2

在要添加过渡效果的元素上使用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属性，因为更改显示属性时动画不显示。

文字从左到右显示

2 个答案: