css - 有没有办法实现这种悬停效果？

Question

我正在开发一个博客，并试图实现一种悬停效果，该效果可以向上滑动以在悬停时显示完整的帖子预览。所附图像可能更能传达所需的效果。基本上，只显示帖子的标题，然后将鼠标悬停在标题上，同时显示预览的其余部分。

到目前为止，我能够接近的唯一方法是使用两个单独的 div，一个只有标题，另一个有完整的预览(包括标题)。然后将标题 div 淡出，同时向上滑动另一个。它看起来还不错，但它并不像我希望的那样光滑。我更希望一切都向上滑动。

如果有任何 CSS 向导可以帮助我，我将不胜感激。此外，纯 CSS 会很棒，JS 是最后的手段。

谢谢，奥利。

Answer 1

这是一个快速/肮脏的解决方案:

HTML:

<div class="container">
    <div class="post">
        <div class="title">Bla bla bla</div>
        <div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

CSS:

.container {
    background-color: #00f;
    width: 300px;
    height: 300px;
    position: relative;
}

.post {
    cursor: pointer;
    background-color: #fff;
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

.body {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.post:hover .body {
    height: 200px;
    opacity: 1;
}

演示:https://jsfiddle.net/y7rb77sk/

当然你可以添加过渡动画让它变得更酷