Increase height on hover and push elements top and bottom - html

Question

I have 3 equal elements on the page (33.333% height each), when the user hovers over one of the elements I would like the height of that element to grow to 100%.
The first section works as I'd like it to, the 2nd section I would like it to grow from the top and bottom, pushing the elements above and below off of the screen - I can do this with absolute positioning, but then the elements above and below stay in the same place and the element grows over them (with the right z-index).
I've tried scaling the element, and using borders that increase/decrease, however I will be using background images and potentially videos so this won't work.
Here is a jsfiddle of what I have currently:
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;
}
.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;
}
<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>
https://jsfiddle.net/d81mxuL5/

Answer 1

You need a less specific selector to hide all sections when the outer container is hovered:
.home-split:hover .item {
height: 0;
overflow: hidden;
}

Answer 2

friend I use JQuery to achive
$(".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>