Question

我一直试图在CSS中创建一个AAnimated Scrolling Image Caption但我在这里遇到了问题！

如果我为图像设置了特定的高度和宽度，它就会像它应该的那样工作，但是如果我把它拿出来，那么图片下方会显示标题并且它不应该显示。如果没有设置特定的高度和宽度，我该如何解决？

＆＃13;

<figure>
  <img src="http://i.imgur.com/6u8WDcm.jpg" alt="A Picture of a Koala Bear">
  <figcaption>
    <p>Clique na imagem para ver a galeria.</p>
  </figcaption>
</figure>

＆＃13;

wp_enqueue_scripts

＆＃13;

Answer 1

我在这里给你一个更新的小提琴：http://jsfiddle.net/cj9b5h9m/1/

相信这有你想要的行为。有一些变化，主要的两个是：

相对于figure绝对定位您的figcaption和figure。
给你的数字display: inline-flex，使其缩小以适合儿童形象

css现在看起来像：

* {
  margin: 0;
  padding: 0;
}

figure {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: inline-flex;
}

figcaption {
    position: absolute;
    top: 100%;
    width: 100%;
    background: rgba(230, 150, 15, 0.6);
    transition: transform 1s ease;
    -moz-transition: transform 1s ease;
    -webkit-transition: transform 1s ease;
    -ms-transition: transform 1s ease;
    -o-transition: transform 1s ease;
    padding: 10px;
}

figure:hover figcaption {
    transform: translateY(-100%);
}

h1, p {
    color: #ffffff;
}

CSS中的动画滚动图像标题

1 个答案: