Javascript-форум - Действие на один блок, а не на все со схожим названием

"Написал" небольшой "скрипт" который выводит два блока на картинку при наведении:

<style>
.cover-all{
    width:125px;
    height:165px;
    overflow:hidden;
}
.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;
}
<script>
$(document).ready(function(){
    $(".cover-all").hover(function(){
        $(".cover-bottom").animate({"margin-top":"0px"},350);
        $(".cover-top").animate({"margin-top":"0px"},350);} , function(){
            $(".cover-bottom").animate({"margin-top":"165px"},350)
            $(".cover-top").animate({"margin-top":"-48px"},350);});
});
</script>
<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>

Вопрос: "При создании более одной картинки, скрипт как не странно работает на все картинки у которых название "Cover-all", то бишь при наведении на одну картинку блоки появляются во всех. Знаю что подобная проблема решается на раз-два, вот только как понятия не имею... Как быть?"
Заранее спасибо.

<!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>