css - 动画 叠加从图像中导出宽度

Question

我在 <figure> 中有以下用于动画滑入式字幕叠加的 CSS元素:

figure {
    display:table;  /* to align width of figcaption to image width (hack?) */
    position:relative;
    overflow:hidden;
    font-weight:normal;
    margin:0 auto 1em;
}
figure img {
    display:block;
    margin:0 auto;
}
figcaption {
    display:table-caption;  /* maybe required for captions below image */
    caption-side:bottom;    /* ditto */
    position:absolute;
    background:rgba(0,0,0,.75);
    color:#fff;
    padding:1rem;
    text-align:left;
    font-size:.9rem;
    opacity:0;
    bottom:0;
    left:0;
    -webkit-transform:translate3d(0,100%,0);
            transform:translate3d(0,100%,0);
    -webkit-transition:all 1.5s ease;
    transition:all 1.5s ease;
}
figure:hover figcaption {
    opacity:1;
    -webkit-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
} 

display:table/-caption源自 SO 上的先前解决方案，以将宽度的单独设置保留给 <figure>元素，尽管标题显示在图像下方并且游戏中没有动画。

删除 display:table-caption;等 figcaption没有区别，添加 overflow:hidden 也没有区别在这里。

HTML 很简单:

<figure>
<img src="example.jpg" width="393" height="499" alt="example">
    <figcaption>
    <p>Lorem ipsum ...</p>
    </figcaption>
</figure>

在 Chrome(和 Safari 5/Windows)中，它按预期工作，IE8 在 <figure> 上阻塞反正。但是，在 Firefox 中，figcaption 显示从图像下方逐渐增加背景颜色。这可能是一个错误，尽管该行为也并非没有逻辑。

这没什么大不了的，因为这是一个只有几个静态页面的微型站点，没有数据库等。添加 style="width:xxxpx"手动很容易。对于较大的站点，我们坚持使用 javascript 以与旧浏览器/IE 兼容，因此插入 img包装宽度 div是无痛的。无论如何，欢迎将来使用干净的自动 CSS 解决方案。

TIA

编辑:

Paulie_D 的代码成功了，特别是 dislay:inline-block .

要使更长的字幕绕行多行，唯一需要做的其他更改是删除 padding:1rem;来自 figcaption一个单独的规则作为右填充(并且，取决于填充量，标题的一部分)将流到图像之外并且溢出被隐藏:

figcaption > * {
    margin:1rem;
}

Answer 1

这在 FF 和 Chrome 中的功能相同。我希望这就是您所追求的。

body {
  text-align: center;
}
figure {
  position: relative;
  overflow: hidden;
  font-weight: normal;
  display: inline-block;
  /* shrink wrap */
}
figure img {
  display: block;
}
figcaption {
  position: absolute;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  padding: 1rem;
  text-align: left;
  font-size: .9rem;
  opacity: 0;
  top: 100%;
  left: 0;
  width: 100%;
  transform: translateY(0%);
  transition: all 1.5s ease;
}
figure:hover figcaption {
  opacity: 1;
  transform: translateY(-100%);
}

<figure>
  <img src="http://lorempixel.com/image_output/city-h-c-393-499-4.jpg" width="393" height="499" alt="example">
  <figcaption>
    <p>Lorem ipsum ...</p>
  </figcaption>
</figure>