Emulating a specific CSS hover effect

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.