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>

动画<figcaption>叠加从图像中导出宽度

1 个答案: