从<figcaption>图像派生宽度的动画叠加

Question

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

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 中，无花果标题显示从图像下方开始随着背景颜色的增加而滑入。这可能是一个错误，尽管行为也不是没有逻辑。

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

蒂亚

编辑：

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>