Такие штуки можно и без js делать, с помощью css transition:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#wrapper{
width: 800px;
height: 200px;
}
.image{
width: 200px;
height: 200px;
float: left;
outline: 1px solid red;
overflow: hidden;
}
.inner{
padding: 10px;
background: rgba(48,36,36,0.5);
margin: 160px 0 0 0;
transition: all 0.5s;
}
.image:hover .inner{
margin: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="image">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dicta mollitia adipisci atque nemo nobis enim ipsa ad soluta optio assumenda, tempora dolorem, amet reprehenderit eos neque doloremque esse placeat.</div>
</div>
<div class="image">
<div class="inner">Ut voluptate beatae officia deserunt, enim quibusdam. Culpa ex asperiores quo praesentium eaque magni et explicabo, perferendis similique voluptates dolores voluptatem sit unde dolorem, officiis deserunt, deleniti debitis a placeat.</div>
</div>
<div class="image">
<div class="inner">Consequuntur dignissimos, aliquam nisi ullam cumque, dolores cum voluptatem earum libero sunt odio molestiae! Nulla repellendus eligendi, eius ipsam libero consectetur amet voluptatem molestiae, sint nobis et? Voluptas doloremque, sint!</div>
</div>
<div class="image">
<div class="inner">Soluta ipsa, quibusdam. Quibusdam hic voluptate nihil voluptatem neque, aliquid minima est quae architecto optio, rem. Iusto inventore obcaecati nisi cum necessitatibus, animi laudantium dolor, adipisci harum consequatur, quibusdam totam.</div>
</div>
</div>
</body>
</html>
