Emulating a specific CSS hover effect - css

Question

I'm trying to emulate the hover effect you can see here:
http://www.timeout.com/newyork (When you hover on the articles.)
I understand how to make a div move on :hover, what I don't understand is how they've hidden the "read more" button until the div is hovered over.
Essentially I would like to know how to hide a div until mouse over, then have it slide out from under another.

Answer 1

Here is a pure CSS solution I quickly hacked up: CSS Hover Effect
h1, h2, h3, h4, h5{
margin:0px;
}
.tile{
overflow: hidden;
width: 400px;
height:350px;
}
.tile:hover > .body{
transition: all 0.5s ease;
top: -3em;
}
.body{
transition: all 0.5s ease;
background-color: #333;
margin:0px;
color: #fafafa;
padding: 1em;
position:relative;
top: -1em;
}
<div class="tile">
<img src="http://lorempixel.com/400/300">
<div class="body">
<h2>Test Header</h2>
<p>Info to display</p>
</div>
</div>
Basically, I just change the position of the text div when I hover over the main div and add a transition animation to it.

Answer 2

They coukd change the maxHeight ...
.read_more {
maxHeight: 2px;
overflow:hidden;
}
.read_more:hover {
maxHeight: 30px;
}

Answer 3

See if this simple example helps:
.main{
width: 300px;
height: 300px;
position: relative;
background:yellow;
overflow:hidden;
}
.hovered{
width: 100%;
height: 64px;
background: gray;
position: absolute;
bottom: -28px;
}
.hovered span{
background: red;
color: #fff;
display:block;
width: 100%;
padding: 5px 0;
}
.main:hover .hovered{
bottom: 0;
}
https://jsfiddle.net/4zak8bfp/

Answer 4

You can do it using some jQuery addClass() and removeClass() methods.
Here is an example:
HTML:
<div class="wrapper">
<div class="caption">
<H1>This is a title</H1>
<p>
This is sample contents...
</p>
<div class="read-more-wrapper">
Read More
</div>
</div>
</div>
CSS:
.wrapper{
position: relative;
width: 450px;
height: 250px;
background-color: #2f89ce;
overflow: hidden;
}
.caption{
display: block;
position: absolute;
bottom: -30px;
width: 100%;
height: auto;
background-color: #fff;
transition: all ease-in-out 0.3s;
}
.read-more-wrapper{
background-color: #d03134;
height: 30px;
}
.slidein{
bottom: 0;
transition: all ease-in-out 0.3s;
}
JQuery:
$('.wrapper').on('mouseenter', function(){
$(this).find('.caption').addClass("slidein");
}).on('mouseleave', function(){
$(this).find('.caption').removeClass('slidein');
});
Here is the fiddle:
https://jsfiddle.net/bk9x3ceo/2/
Hope that helps.