облегченное повышение?

$(".item").hover(function() {
        $(this).siblings().css( "height", "1px");
        $(this).css( "height", "98%");
    }, function() {
         $(this).siblings().css( "height", "33%");
          $(this).css( "height", "33%");
    });

body {
	height: 100%;
	overflow: hidden;
}

.home-split {
	height: 100vh;
}

.home-split .item {
	height: 33.333%;
	width: 100%;
	transition: all 1s;
	z-index: 999;
  text-align: center;
  overflow: hidden
}

.h-100 {
  height: 100%;
}

.home-split .item:hover {
	height: 100%;
	transition: all 1s;
	z-index: 9990;
	top: 0 !important;
}

.home-split .item .title {
	align-self: center;
}

.home-split .item a {
	text-decoration: none;
	color: #FFF;
	display: table;
  height: 100%;
  width: 100%;
}

.home-split .item a h2 {
	display: table-cell;
	vertical-align: middle;
}

.home-split .item:nth-child(1) {
	background-color: #000;

}

.home-split .item:nth-child(2) {
	background-color: #d7d7d7;
}

.home-split .item:nth-child(3) {
	background-color: #ebebeb;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home-split">

      <div class="row no-gutters item">
        <div class="col-12 text-center h-100">
          <a href="#">
            <h2>Item 1</h2>
          </a>
        </div>
      </div>

      <div class="row no-gutters item">

        <div class="col-12 text-center h-100">
          <a href="#">
            <h2>Item 2</h2>
          </a>
        </div>

      </div>

      <div class="row no-gutters item">

        <div class="col-12 h-100">
          <a href="#">
            <h2>Item 3</h2>
          </a>
        </div>

      </div>


    </section>