Question

我创建了这个jsfiddle。默认情况下，它仅在叠加层中显示<div class="title">，当您将鼠标悬停在叠加层上时，叠加层会设置为100％高度，并显示整个内容（标题+段落）。它工作得很好。

问题是，如果标题+段落的长度太长，它会停止工作，正如您在jsfiddle中看到的那样，它无法显示所有内容，它会得到在底部切断。

＆＃13;

figure {
    position: relative;
    overflow: hidden;
    height: auto;
}
figcaption {
    width: 100%;
    height: 100%;
    padding: 10px;
    color: #615b51;
    background: #fff;
}
figcaption h2 {
    margin: 0 0 25px 0;
}
figcaption {
    overflow: hidden;
    position: absolute;
    bottom: -71%;
    background: rgba(255, 255, 255, 0.5);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
figcaption p {
    display: none;
}
figcaption h2, figcaption .title span {
    text-transform: uppercase;
}
figcaption:hover p {
    display: block;
}
figcaption:hover {
    bottom: 0;
}
.item {
    width: 500px;
    height: auto;
}

＆＃13;

<div class="item">
    <figure>
        <img class="img-responsive" src="http://lorempixel.com/output/nature-q-c-500-300-10.jpg" alt="Image" />
        <figcaption>
            <div class="title">
                <span>lorem ipsum</span>
                <h2>blog title blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title  blog title</h2>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
        </figcaption>
    </figure>
</div>

＆＃13;

问题是，如何让它在悬停时显示所有<figcaption>内容，并同时播放动画？如何使其可滚动？

我已经尝试了一天，但无法找到解决方法。请帮帮我。

Answer 1

为了完成所有工作，您可以使用此jQuery + CSS解决方案。

使用（位置+变换+偏移）的组合来显示/隐藏动画。它会在必要时自动显示垂直滚动条。

<强> JsFiddle Example

var figureCaption = function () {
    var figureH = $('.img-responsive').height();
    var titleH = $('.title').outerHeight();
    var figCap = $('figcaption');

    if (figureH > titleH) {
        $(figCap).css('transform', 'translateY(-' + titleH + 'px)');
        $(figCap).hover(function () {
            $(this).css('transform', 'translateY(-' + figureH + 'px)');
        }, function () {
            $(this).css('transform', 'translateY(-' + titleH + 'px)');
        });
    } else {
        $(figCap).css('transform', 'translateY(-' + figureH + 'px)');
        $(figCap).hover(function () {
            $(this).css('transform', 'translateY(-' + figureH + 'px)');
        });
    }
};

$(document).ready(figureCaption);
$(window).resize(figureCaption);

figure {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    display: block;
    margin: 0;
}
figure img {
    width: 100%;
    height: auto;
    display: block;
}
figcaption {
    background: rgba(255, 255, 255, 0.5);
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
}
figcaption .title {
    text-transform: uppercase;
    padding: 10px;
}
figcaption .title h2 {
    margin: 0;
}
figcaption p {
    padding: 5px 10px;
    margin: 0;
}
figcaption p:last-child {
    padding-bottom: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<figure>
    <img class="img-responsive" src="http://lorempixel.com/output/nature-q-c-500-300-10.jpg" />
    <figcaption>
        <div class="title">
            <span>lorem ipsum</span>
            <h2>The quick brown fox jumps over the lazy dog</h2>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
    </figcaption>
</figure>

Answer 2

将css：overflow:hidden更改为overflow:visible，以查找您希望展示的元素，即使它们超出边界。

编辑：您的标题超出了图片的顶部，因为100％的高度不会影响您放置的填充。使用以下方法删除顶部/底部填充：

figcaption{
        width: 100%;
        height: 100%;
        padding-left: 10px;
        padding-right: 10px;
        color: #615b51;
        background: #fff;
    }

Answer 3

尝试

figure {
  position: relative;
  overflow: hidden;
  height: auto;
}
figcaption {
  width: 100%;
  padding: 10px 0;
  color: #615b51;
  background: #fff;
}
figcaption h2 {
  margin: 0 0 25px 0;
}
figcaption {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
figcaption p {
  display: none;
}
figcaption h2,
figcaption .title span {
  text-transform: uppercase;
}
figcaption:hover p {
  display: block;
}
figcaption:hover {
  bottom: 0;
  height: auto;
}
.item {
  width: 500px;
  height: auto;
}
figcaption .title {
  overflow: auto;
  height: 100px;
}

<div class="item">
  <figure>
    <img class="img-responsive" src="http://i.imgur.com/LcrqlIS.jpg" alt="Image" />
    <figcaption>
      <div class="title">	<span>lorem ipsum</span>

        <h2>blog title</h2>
        <h2>blog title</h2>
        <h2>blog title</h2>
        <h2>blog title</h2>
        <h2>blog title</h2>

      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p>
    </figcaption>
  </figure>
</div>

请参阅：https://jsfiddle.net/tamilcselvan/koa2wpyb/2/

修改

尝试https://jsfiddle.net/tamilcselvan/koa2wpyb/5/

始终显示图像标题虽然太长

3 个答案: