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

Question

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

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

如果任何CSS向导可以帮助我，我会很感激。此外，只有CSS才会很棒，JS作为最后的手段。

谢谢， OLI。

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;
}

DEMO：https://jsfiddle.net/y7rb77sk/

当然，你可以添加过渡动画来使其变形并使其更酷

Answer 2

这是一个解决方案：http://jsfiddle.net/leojavier/gbuLykdj/4/

如果出现溢出，此解决方案将为您提供滚动：http://jsfiddle.net/leojavier/gbuLykdj/5/

StringWriter.toString()

CSS

<div class="container">
    <img src="http://placecorgi.com/300/400" alt="">
    <article>
        <h1>My Title</h1>
        <p>san leo vestibulum non. Donec porttitor semper malesuada. Morbi vel felis venenatis, tempus mi in, ornare purus. Morbi hendrerit orci ipsum, a fringilla ante tristique in. Fusce sollicitudin venenatis neque eget ornare. Integer semper, ante ut vestibulum finibus, ipsum ex aliquam quam, qui</p>
    </article>
</div>