Is there a way to achieve this hover effect? - css

Question

I'm in the process of developing a blog and am trying to achieve a hover effect that slides up to reveal the full post preview on hover. The attached image is probably better at conveying the desired effect. Basically, only the title of the post is shown, then on hover the title slides up, also revealing the rest of the preview.
The only way I've been able to come close so far is by using two seperate div's, one with just the title and the other with the full preview (title included). Then fade the title div out while sliding the other up. It looked okay but it's just not as smooth as I'd like it to be. I would much prefer everything to slide up.
If any CSS wizards can help me, I'd appreciate it. Also, CSS-only would be great, JS as a last resort.
Thanks,
Oli.

Answer 1

Here's a quick / dirty solution:
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/
Of course you can add transitions to animate it and make it cooler

Answer 2

Here is a solution: http://jsfiddle.net/leojavier/gbuLykdj/4/
Incase of overflow, this solution will give you a scroll: http://jsfiddle.net/leojavier/gbuLykdj/5/
<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>
CSS
.container{
position:relative;
width:300px;
height:400px;
}
article{
position:absolute;
width:100%;
max-width:280px;
height:auto;
background:rgba(255,255,255,0.8);
bottom:0;
padding:10px;
font-family:arial;
opacity:0;
transition: opacity 1s;
}
.container:hover > article {
opacity:1;
}