TTATPuOT,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.cover-all{
width:125px;
height:165px;
overflow:hidden;
float: left;
}
.cover-bottom{
height:117px;
width:125px;
background:#c8c8c8;
margin-top:165px;
text-align:center;
}
.cover-top{
height:48px;
width:125px;
background:#a8a8a8;
margin-top:-48px;
text-align:center;
} </style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function (){
$(".cover-all").hover(function(){
$(".cover-bottom", this).stop().animate({"margin-top":"0px"},350);
$(".cover-top", this).stop().animate({"margin-top":"0px"},350);} , function(){
$(".cover-bottom", this).stop().animate({"margin-top":"165px"},350)
$(".cover-top", this).stop().animate({"margin-top":"-48px"},350);});
})
</script>
</head>
<body>
<div class="cover-all" style="background:url(mss.jpg) no-repeat; background-color:#000; background-size:cover;">
<div class="cover-top">
Немного текста
</div>
<div class="cover-bottom">
Чуть больше текста
</div>
</div>
<div class="cover-all" style="background:url(mss.jpg) no-repeat; background-color:#000; background-size:cover;">
<div class="cover-top">
Немного текста
</div>
<div class="cover-bottom">
Чуть больше текста
</div>
</div>
</body>
</html>