Can'；使用jQuery和CSS转换无法获得正确的高度悬停效果

当我将鼠标悬停在我的一张牌上时，我希望底部平滑地向上移动。悬停卡的底部明显高于其他非悬停卡-请参见下面的屏幕截图。我也希望餐厅的名字能向上提升，我正在实现这一目标

另一个问题是，我的代码目前在悬停上产生了不稳定的效果，这是我不想要的。这可能是因为我在CSS转换中使用jQuery的方式不正确

我的最新尝试（包括许多尝试）可在我的：

HTML:

JS/JQUERY：

 $('.previously-viewed__item').mouseenter(function() {

        $($(this).find('.previously-viewed__content')).css({'height':'166px'});
        $($(this).find('.previously-viewed__image')).css({'margin-bottom':'6px'});    

        $(this).css({'box-shadow': '0 0px 7px 0 #85959B, 0 0px 7px 0 #85959B'});

      });

      $('.previously-viewed__item').mouseleave(function() {

        $($(this).find('.previously-viewed__content')).css({'height':'136px'});
        $($(this).find('.previously-viewed__image')).css({'margin-bottom':'36px'});                 
        $(this).css({'box-shadow': 'none'});

       });

我试图实现的悬停效果：

---

谢谢@JOPLOmacedo这看起来不错，但是你能提供一些解释让我接受你的答案吗？也许稍后：p我现在很忙。但是，如果其他人想学习我的例子并解释正在发生的事情，我们非常欢迎他们这样做。-->

.previously-viewed__item {
      float: left;
      width: 31%;
      background: #fff;
      margin-bottom: 10px;
      margin-right: 1%;
      transition: box-shadow 0.5s;
      transition-property: box-shadow;
      transition-duration: 0.5s;
      transition-timing-function: initial;
      transition-delay: initial;
      margin-bottom: 80px;
      padding-bottom: 30px;
      border-bottom: solid 2px #ccd3da;
      text-decoration: none  
  }

  .previously-viewed__image {
    width: 100%;
    height: auto;
    max-width: 320px;
    padding-bottom: 26px;
    transition: margin-bottom 0.5s;
  }

  .previously-viewed__content {
    width: 100%;
    height: 136px;
    transition: height 0.5s;
  }

  .previously-viewed__name {
    padding-top: 15px;
    padding-left: 20px;
    font-family: 'HelveticaNeue-Medium', 'Helvetica Neue Medium', Helvetica, Roboto, Arial, sans-serif;
    color: #2C393E;
    font-size: 16px;
    line-height: 24px;
    display: inline-block;
    font-weight: bold;
    margin-top: -5px;
    height: 5px
  }

  .previously-viewed__location {
    padding-left: 20px;
    color: #1c1c1c;
    font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
    line-height: 24px;
    font-weight: 500;
    margin-top: 10px;
    font-size: 1rem;
    padding-bottom: 46px;
  }

 $('.previously-viewed__item').mouseenter(function() {

        $($(this).find('.previously-viewed__content')).css({'height':'166px'});
        $($(this).find('.previously-viewed__image')).css({'margin-bottom':'6px'});    

        $(this).css({'box-shadow': '0 0px 7px 0 #85959B, 0 0px 7px 0 #85959B'});

      });

      $('.previously-viewed__item').mouseleave(function() {

        $($(this).find('.previously-viewed__content')).css({'height':'136px'});
        $($(this).find('.previously-viewed__image')).css({'margin-bottom':'36px'});                 
        $(this).css({'box-shadow': 'none'});

       });