При наведении эффект у каждого дива отдельно jquery

Здравствуйте. С горя попалам написал скриптик для картинок галереи. Суть, в каждом диве имеется картинка которая больше самого дива. При наведении картинка прокручивается вверх.

проблема: при наведении на какую-либо из картинок прокручиваются картинки в всех дивах, а надо чтобы в каждом диве только при наведении.

сам скрипт:

$(".gallery_product").hover(function(e) {
    var ImgHeight = $('.gallery_product a img').height();
    var DivHeight = $('.gallery_product').height();
  e.preventDefault();
    $(".gallery_product").mouseout(function() {
  $(".gallery_product").removeClass('hover');
   $('.gallery_product a img').css('margin-top', '0').css('transition', 'all 1s ease 0s');
    });
    $(".gallery_product").mouseover(function() {
  $(this).addClass('hover').attr('height', ImgHeight);
        //$(this).attr('height', ImgHeight);
    $('.gallery_product a img').css('margin-top', - ImgHeight + DivHeight).css('transition', 'all 5s ease 0s');
    });
})

  <!-- portfolio-area start -->
  <div class="work">
    <div class="container">
        <h3><span>Ç</span>Çalışmalarımız</h3>
        <div class="row">
            <div class="col-sm-12">
                <div class="row">
                <nav class="navbar navbar-default">
                  <div class="container">
                    <!-- Brand и toggle сгруппированы для лучшего отображения на мобильных дисплеях -->  
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                    </div>
                    <!-- Соберите навигационные ссылки, формы, и другой контент для переключения -->  
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                      <ul class="nav navbar-nav btn-group" role="group">
                        <li><a class="btn btn-default filter-button" data-filter="all">Tümü</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="web">Web Tasarım</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="psd">PSD Döküm</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="development">Yazılım</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="wordpress">Wordpress</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="shop">E-Ticaret</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="seo">SEO</a></li>
                        <li><a class="btn btn-default filter-button" data-filter="landing">Landing</a></li>
                      </ul>
                    </div><!-- /.navbar-collapse -->
                    </div>  
                  </div><!-- /.container -->  
                </nav>
            </div>
            <div class="gallery_product col-sm-6 col-md-3 filter web development">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/black-mask-prelanding-page-1.jpg" alt="#"></a>
            </div>
            <div class="gallery_product col-sm-6 col-md-3 filter development wordpress">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/detofit-landing-page-2.jpg" alt="#"></a>
            </div>
            <div class="gallery_product col-sm-6 col-md-3 filter web shop">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/instagram-landing-korse.jpg" alt="#"></a>
            </div>
            <div class="gallery_product col-sm-6 col-md-3 filter shop">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/onform-korse-landing-page.jpg" alt="#"></a>
            </div>
            <div class="gallery_product col-sm-6 col-md-3 filter wordpress">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/marketyum-product-page.jpg" alt="#"></a>
            </div>
            <div class="gallery_product col-sm-6 col-md-3 filter shop">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/detofit-landing-page-1.jpg" alt="#"></a>
            </div>
            <div class="gallery_product col-sm-6 col-md-3 filter wordpress">
                <a href="#" title="#"><img class="img-responsive" src="images/portfolio/black-mask-prelanding-page-1.jpg" alt="#"></a>
            </div>
        </div>
        <a class="btn btn-default filter-button">Tümünü Gör</a>
    </div>
  </div>
  <!-- portfolio-area end -->

в css нет необходимости

Подкоректируйте пожалуйста.