Как в JQuery менять стиль только того элемента, на который происходит наведение?

Здравствуйте, друзья.

Есть код:

<div class="post-item">
                  <img src="img/1.jpg" alt="">
                  <div class="post-gradient"></div>
                  <div class="post-item_inner">
                      <h2><a href="#">Заголовок статьи</a></h2>
                      <div class="post-meta">
                         <div class="post-comment">
                             <i class="fa fa-commenting"></i>
                             <span class="comments-link">
                                <a href="#">5</a>
                             </span>
                         </div>
                         <div class="post-views">
                             <i class="fa fa-eye"></i>
                             <span class="comments-link">
                                <a href="#">2398</a>
                             </span>
                         </div>  
                      </div>
                  </div>
              </div>

Нужно чтобы при наведении на .post-item менялся стиль .post-gradient

Написал такой код и вроде бы всё работает:

$('.post-item').hover(
                function(){
                    $('.post-gradient').css('background','linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 70%)');
                },
                function(){
                    $('.post-gradient').css('background','linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 70%)');
                }
            );

Проблема в том, что при наведении меняются ВСЕ элементы с классом .post-gradient, а мне нужно чтобы менялся только тот, на который я навожу. Как это сделать? Не прикручивать же к каждой карточке id и писать 4 скрипта?

Спасибо.