CODEWITHSUNDEEP
htmlcss
TekTok
TekTok

Reputation: 43

How can I handle setting a z-index? hover cancels z-index before transitions are complete

I am trying to build a webpage in html & css with 6 columns. Desired behaviour is that when the user hovers over 1 column, it expands over the top of the other 5 to display additional information, and when the user stops hovering, the column shrinks back down.

Each div is set in the CSS to transition width and margin-left to cover the whole width of the screen. On hover, the z-index is also set to 1000, to ensure the chosen column covers the rest of the content.

However, when hovering ceases, as the z-index returns to undefined immediately, the shrinking column snaps behind all columns to the right of it, which is quite jarring.

I am hoping to figure out a way I can keep the most recently hovered column persisting as the highest z-index value long enough for it to close, and then be reset so that any other column getting expanded can take precedence.

I have tried using z-index with transition and also transition-delay, however z-index doesn't seem bound by any sort of transition timer. Even when grouping it with other transition-delay effects, the column jumps behind everything to the right of it immediately, and then when the delay timer is up the transition begins.

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 rel="stylesheet" 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>

Upvotes: 4

Views: 180

Answers (1)

Temani Afif
Temani Afif

Reputation: 273904

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

Relevant code:

.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 rel="stylesheet" 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>

Upvotes: 5

Related Questions