Z-Index：Div不重叠吗？

Question

Creating a landing page made up of 4 equal sections (Divs). When you hover over a section it is supposed to increase in size, while the others decrease in size(either height or width depending on it's position to the hovered div.

Two Problems.... 1. The decrease in height does not work(the decrease in width does) 2. The top two sections expand behind the bottom two sections when hovered over. The bottom two sections expand over the top two sections, which is what I'd rather have

   <div class="container">
      <section class="screen top-left">
        <h1>Jeff</h1>
        <a href="#" class="button">About</a>
      </section>

      <section class="screen top-right">
        <h1>Renee</h1>
        <a href="#" class="button">About</a>
      </section>

      <section class="screen bottom-left">
        <h1>Mike</h1>
      <a href="#" class="button">About</a>
      </section>

      <section class="screen bottom-right">
        <h1>Chris</h1>
        <a href="#" class="button">About</a>
      </section>
   </div>

@import "reset";
@import "variables";
@import "mixins";

h1 {
  font-size: 5rem;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Playfair Display', serif;
}

.button {
  display: block;
  position: absolute;
  left: 50%;
  top: 55%;
  height: 1.6rem;
  padding-top: 0.6rem;
  width: 10rem;
  text-align: center;
  color: white;
  border: 3px solid #fff;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateX(-50%);
  transition: all .2s;
}

.screen.top-left .button:hover {
  background-color: $top-left-button-hover;
  border-color: $top-left-button-hover;
}

.screen.top-right .button:hover {
  background-color: $top-right-button-hover;
  border-color: $top-right-button-hover;
}

.screen.bottom-left .button:hover {
  background-color: $bottom-left-button-hover;
  border-color: $bottom-left-button-hover;
}

.screen.bottom-right .button:hover {
  background-color: $bottom-right-button-hover;
  border-color: $bottom-right-button-hover;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: $container-bgColor;

  .screen {
    position: absolute;
    width: 50%;
    height: 50%;
    overflow: hidden;
  }
}

.screen.top-left {
  left: 0;
  background: url('../img/dog1.jpg') center center no-repeat;
  background-size: cover;

  &:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: $top-left-bgColor;
  }
}

.screen.top-right {
  right: 0;
  background: url('../img/dog2.jpg') center center no-repeat;
  background-size: cover;

  &:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: $top-right-bgColor;
  }
}

.screen.bottom-left {
  left: 0;
  bottom: 0;
  background: url('../img/dog3.jpg') center center no-repeat;
  background-size: cover;

  &:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: $bottom-left-bgColor;
  }
}

.screen.bottom-right {
  right: 0;
  bottom: 0;
  background: url('../img/dog4.jpg') center center no-repeat;
  background-size: cover;

  &:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: $bottom-right-bgColor ;
  }
}

.screen.top-left, .screen.top-right,
.screen.bottom-left, .screen.bottom-right,
.screen.top-left:before, .screen.top-right:before,
.screen.bottom-left:before, .screen.bottom-right:before {
  transition: $animateSpeed all ease-in-out;
}

// Hover top left
.hover-top-left .top-left {
  width: $hover-width;
  height: $hover-height;
}
.hover-top-left .top-right {
  width: $small-width;
}
.hover-top-left .bottom-left .bottom-right {   // no work
  height: $small-height;
}
.hover-top-left .top-right:before
.bottom-right:before .bottom-left:before {
  z-index: 2;
}

// Hover top right
.hover-top-right .top-right {
  width: $hover-width;
  height: $hover-height;
}
.hover-top-right .top-left {
  width: $small-width;
}
.hover-top-right .bottom-right .bottom-left {  // no work
  height: $small-height;
}
.hover-top-right .bottom-right:before
.bottom-left:before .top-left:before {
  z-index: 2;
}

// Hover bottom left
.hover-bottom-left .bottom-left {
  width: $hover-width;
  height: $hover-height;
}
.hover-bottom-left .bottom-right {
  width: $small-width;
}
.hover-bottom-left .top-left .top-right {
  height: $small-height;
}
.hover-bottom-left .top-right:before
.bottom-right:before .bottom-left:before {
  z-index: 2;
}

// Hover bottom right
.hover-bottom-right .bottom-right {
  width: $hover-width;
  height: $hover-height;
}
.hover-bottom-right .bottom-left {
  width: $small-width;
}
.hover-bottom-right .top-left .top-right {
  height: $small-height;
}
.hover-bottom-right .top-right:before
.top-left:before .bottom-left:before {
  z-index: 2;
}

@media(max-width: 800px) {
  h1 {
    font-size: 2rem;
  }
  .button {
    width: 12rem;
  }
}

@media(max-height: 700px) {
  .button {
    top: 70%;
  }
}

$container-bgColor: #444;

$top-left-bgColor: rgba(255, 122, 105, 0.7);
$top-left-button-hover: rgba(255, 122, 105, 0.6);

$top-right-bgColor: rgba(177, 118, 222, 0.7);
$top-right-button-hover: rgba(177, 118, 222, 0.6);

$bottom-left-bgColor: rgba(142, 204, 245, 0.7);
$bottom-left-button-hover: rgba(142, 204, 245, 0.6);

$bottom-right-bgColor: rgba(118, 222, 138, 0.7);
$bottom-right-button-hover: rgba(118, 222, 138, 0.6);

$hover-width: 75%;
$hover-height: 75%;
$small-width: 25%;
$small-height: 25%;
$animateSpeed: 1000ms;

Answer 1

From your explanation, I believe this the effect you're trying to achieve.

The thing is you can use + or ~ to directly manipulate elements that comes after the hovered element. But in cases where you need to manipulate the ones that come before, you can use a bit of JS.

So my solution does so, using only CSS where applicable and JS where needed.

Hope this helps.

Cheers

  $(document).ready(function(){ // top-right hover $('.top-right').mouseover(function(){ $('.top-left').addClass('shrink-left'); }); $('.top-right').mouseout(function(){ $('.top-left').removeClass('shrink-left'); }); // bottom elements hover $('.bottom-right').mouseover(function(){ $('.top-left, .top-right').addClass('shrink-up'); $('.bottom-left').addClass('shrink-left'); }); $('.bottom-right').mouseout(function(){ $('.top-left, .top-right').removeClass('shrink-up'); $('.bottom-left').removeClass('shrink-left'); }); $('.bottom-left').mouseover(function(){ $('.top-left, .top-right').addClass('shrink-up'); }); $('.bottom-left').mouseout(function(){ $('.top-left, .top-right').removeClass('shrink-up'); }); }); 

  h1 { font-size: 5rem; color: #fff; position: absolute; left: 50%; top: 10%; transform: translateX(-50%); white-space: nowrap; font-family: 'Playfair Display', serif; } .button { display: block; position: absolute; left: 50%; top: 55%; height: 1.6rem; padding-top: 0.6rem; width: 10rem; text-align: center; color: white; border: 3px solid #fff; border-radius: 4px; font-weight: 600; text-transform: uppercase; text-decoration: none; transform: translateX(-50%); transition: all .2s; } .screen.top-left .button:hover { background-color: rgba(255, 122, 105, 0.6); border-color: rgba(255, 122, 105, 0.6); } .screen.top-right .button:hover { background-color: rgba(177, 118, 222, 0.6); border-color: rgba(177, 118, 222, 0.6); } .screen.bottom-left .button:hover { background-color: rgba(142, 204, 245, 0.6); border-color: rgba(142, 204, 245, 0.6); } .screen.bottom-right .button:hover { background-color: rgba(118, 222, 138, 0.6); border-color: rgba(118, 222, 138, 0.6); } .container { position: relative; width: 100%; height: 100%; background: #444; } .screen { position: absolute; width: 50%; height: 50%; overflow: hidden; } .screen.top-left { left: 0; background: url('../img/dog1.jpg') center center no-repeat; background-size: cover; } .screen.top-left:before { position: absolute; content: ""; width: 100%; height: 100%; background: rgba(255, 122, 105, 0.7); } .screen.top-right { right: 0; background: url('../img/dog2.jpg') center center no-repeat; background-size: cover; } .screen.top-right:before { position: absolute; content: ""; width: 100%; height: 100%; background: rgba(177, 118, 222, 0.7); } .screen.bottom-left { left: 0; bottom: 0; background: url('../img/dog3.jpg') center center no-repeat; background-size: cover; } .screen.bottom-left:before { position: absolute; content: ""; width: 100%; height: 100%; background: rgba(142, 204, 245, 0.7); } .screen.bottom-right { right: 0; bottom: 0; background: url('../img/dog4.jpg') center center no-repeat; background-size: cover; } .screen.bottom-right:before { position: absolute; content: ""; width: 100%; height: 100%; background: rgba(118, 222, 138, 0.7) ; } .screen.top-left, .screen.top-right, .screen.bottom-left, .screen.bottom-right, .screen.top-left:before, .screen.top-right:before, .screen.bottom-left:before, .screen.bottom-right:before { transition: 1000ms all ease-in-out; } /* Pure CSS Effects */ .top-left:hover { width: 75%; height: 75%; z-index: 100; } .top-left:hover + .top-right { width: 25%; height: 75%; } .top-left:hover ~ .bottom-left, .top-left:hover ~ .bottom-right{ height: 25%; } .top-left:hover + .top-right:before, .top-left:hover ~ .bottom-right:before, .top-left:hover ~ .bottom-left:before { z-index: 99; } .top-right:hover { width: 75%; height: 75%; z-index: 100; } .top-right:hover + .top-left { width: 25%; } .top-right:hover ~ .bottom-right, .top-right:hover + .bottom-left { height: 25%; } .top-right:hover ~ .bottom-right:before, .top-right:hover + .bottom-left:before{ z-index: 99; } .bottom-left:hover { width: 75%; height: 75%; z-index: 100; } .bottom-left:hover + .bottom-right { width: 25%; height: 75%; } .bottom-right:hover { width: 75%; height: 75%; z-index: 100; } /* Added for JS styling */ .shrink-left{ height: 75%; width: 25%; z-index: 99; } .shrink-up{ height: 25%; z-index: 99; } .shrink-left.top-left::before, .shrink-up.top-left::before, .shrink-up.top-right:before, .shrink-left.bottom-left:before{ z-index: 99; } .container{ width: 100vw; height: 100vh; position: relative; } @media(max-width: 800px) { h1 { font-size: 2rem; } .button { width: 12rem; } } @media(max-height: 700px) { .button { top: 70%; } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <section class="screen top-left"> <h1>Jeff</h1> <a href="#" class="button">About</a> </section> <section class="screen top-right"> <h1>Renee</h1> <a href="#" class="button">About</a> </section> <section class="screen bottom-left"> <h1>Mike</h1> <a href="#" class="button">About</a> </section> <section class="screen bottom-right"> <h1>Chris</h1> <a href="#" class="button">About</a> </section> </div> 

PS View snippet in full page