html – How can I control how z-index is applied? Hover cancels z-index before transitions complete

Question:

I am trying to create a webpage in HTML & CSS with 6 columns. The desired behavior is that when the user hover over 1 column, it expands over the other 5 to display more information, and when the user moves the cursor away, the column shrinks back.

Each div has CSS rules for width transition and margin-left to expand to full screen width. On hover, z-index is also set to 1000 so that the selected column covers the rest of the content.

However, when the hover stops, the z-index immediately reverts to an undefined value, and the shrinking column is bound to all columns to its right, which is not desirable.

I'm hoping to figure out how to keep the last column, the highest z-index value, long enough for it to close and then reset so that any other expanding column can take precedence.

I tried using z-index together with transition , and also with transition-delay , however z-index doesn't seem to be bound by any transition timer. Even when grouping it with other transition-delay effects, the column immediately moves behind everything to the right of it, and then when the delay timer is activated, the transition starts.

body{
  padding: 0;
  margin: 0;
}
.category {
  float: left;
  width: 16.66%;
  text-align: center;
}

#column1{
  background-color: #147afaff;
  transition: width 1.5s;
  position:absolute;
  height: 100%;
}#column2{
  background-color: #fa9414ff;
  transition: width 1.5s, margin-left 1.5s;
  position:absolute;
  left:16.66%;
  height: 100%;
}#column3{
  background-color: #2bae66ff;
  transition: width 1.5s, margin-left 1.5s;
  position: absolute;
  left:33.32%;
  height: 100%;
}#column4{
  background-color: #fdd20eff;
  transition: width 1.5s, margin-left 1.5s;
  position:absolute;
  left:49.98%;
  height: 100%;
}#column5{
  background-color: #603f83ff;
  transition: width 1.5s, margin-left 1.5s;
  position:absolute;
  left:66.64%;
  height: 100%;
}#column6{
  background-color: #f93822ff;
  transition: width 1.5s, margin-left 1.5s;
  position:absolute;
  left:83.30%;
  height: 100%;
}

#column1:hover{
  width: 100%;
  z-index:1000;
}#column2:hover{
  margin-left: -16.66%;
  width: 100%;
  z-index:1000;
}#column3:hover{
  margin-left: -33.32%;
  width: 100%;
  z-index:1000;
}#column4:hover{
  margin-left: -49.98%;
  width: 100%;
  z-index:1000;
}#column5:hover{
  margin-left: -66.64%;
  width: 100%;
  z-index:1000;
}#column6:hover{
  margin-left: -83.30%;
  width: 100%;
  z-index:1000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Expanding Columns</title>
    <link href="./css/style.css">
  </head>
  <body>
    <header>
      <div class="Website Header"></div>
    </header>

    <section id="categories">
    <div class="row">
      <div id="column1" class="category">
        <h1>Column 1</h1>
      </div>
      <div id="column2" class="category">
        <h1>Column 2</h1>
      </div>
      <div id="column3" class="category">
        <h1>Column 3</h1>
      </div>
      <div id="column4" class="category">
        <h1>Column 4</h1>
      </div>
      <div id="column5" class="category">
        <h1>Column 5</h1>
      </div>
      <div id="column6" class="category">
        <h1>Column 6</h1>
      </div>
    </div>
    </section>
  </body>
</html>

Answer:

Make the z-index have an instant change on hover and a delay on unhover . Make sure you also set the default value.

.category {
  transition: width 1.5s, margin-left 1.5s,z-index 0s 1.5s;
  z-index:0;
}
.category:hover {
  transition: width 1.5s, margin-left 1.5s,z-index 0s 0s;
}

Full code:

body {
  padding: 0;
  margin: 0;
}

.category {
  float: left;
  width: 16.66%;
  text-align: center;
  transition: width 1.5s, margin-left 1.5s,z-index 0s 1.5s;
  z-index:0;
}
.category:hover {
  transition: width 1.5s, margin-left 1.5s,z-index 0s 0s;
}

#column1 {
  background-color: #147afaff;
  position: absolute;
  height: 100%;
}

#column2 {
  background-color: #fa9414ff;
  position: absolute;
  left: 16.66%;
  height: 100%;
}

#column3 {
  background-color: #2bae66ff;
  position: absolute;
  left: 33.32%;
  height: 100%;
}

#column4 {
  background-color: #fdd20eff;
  position: absolute;
  left: 49.98%;
  height: 100%;
}

#column5 {
  background-color: #603f83ff;
  position: absolute;
  left: 66.64%;
  height: 100%;
}

#column6 {
  background-color: #f93822ff;
  position: absolute;
  left: 83.30%;
  height: 100%;
}

#column1:hover {
  width: 100%;
  z-index: 1000;
}

#column2:hover {
  margin-left: -16.66%;
  width: 100%;
  z-index: 1000;
}

#column3:hover {
  margin-left: -33.32%;
  width: 100%;
  z-index: 1000;
}

#column4:hover {
  margin-left: -49.98%;
  width: 100%;
  z-index: 1000;
}

#column5:hover {
  margin-left: -66.64%;
  width: 100%;
  z-index: 1000;
}

#column6:hover {
  margin-left: -83.30%;
  width: 100%;
  z-index: 1000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Expanding Columns</title>
  <link href="./css/style.css">
</head>

<body>
  <header>
    <div class="Website Header"></div>
  </header>

  <section id="categories">
    <div class="row">
      <div id="column1" class="category">
        <h1>Column 1</h1>
      </div>
      <div id="column2" class="category">
        <h1>Column 2</h1>
      </div>
      <div id="column3" class="category">
        <h1>Column 3</h1>
      </div>
      <div id="column4" class="category">
        <h1>Column 4</h1>
      </div>
      <div id="column5" class="category">
        <h1>Column 5</h1>
      </div>
      <div id="column6" class="category">
        <h1>Column 6</h1>
      </div>
    </div>
  </section>
</body>

</html>
 Run code snippetExpand

Answer Source : @Temani Afif

Post Views: 33
Scroll to Top