增加悬停时的高度并将元素推入顶部和底部

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>