transition issue: z-index over width

Question

I have 2 blocks that are each 50% of the page width. When I hover one of these 2 blocks, it then takes up 95% of the page and must go over the second (hence the increase in the z-index on hover). When I switch my cursor from one block directly to another, we notice that from a certain point, the animation of the width is overwritten by the change of the z-index.

I'm looking for a solution to make the animation take priority over the width, not the z-index, smoother effect and ideally without using javascript.

Here is my code:

HTML :

CSS:

* {
  margin: 0;
  padding: 0;
}
html {
  background: #000;
  color: #fff;
}

.page-wrap {
  height: 100vh;
  width: 100vw;
}

.horizontal__reveal {
  position: relative;
  height: 100%;
  width: 100%;
  background: red;
}

.horizontal__reveal__block {
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 100;
  transition: all 1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.horizontal__reveal__block:hover {
  z-index: 200;
  width: 95%;
}
.horizontal__reveal__block-left {
  background: blue;
  left: 0;
}

.horizontal__reveal__block-right {
  background: green;
  right: 0;
}

You can see it live here.

hamid-davodi · Answer

You can do that with omitting z-index when hover occurs. Instead you can use Adjacent Sibling Selector (+) in your CSS as the code below:

* {
    margin: 0;
    padding: 0;
}
html {
    background: #000;
    color: #fff;
}

.page-wrap {
    height: 100vh;
    width: 100vw;
}

.horizontal__reveal {
    position: relative;
    height: 100%;
    width: 100%;
    background: red;
}

.horizontal__reveal__block {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 100;
    transition: all 1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.horizontal__reveal__block:hover {
    /*z-index: 200;*/
    width: 95%;
}

.horizontal__reveal__block:hover + .horizontal__reveal__block {
    width: 5%;
}

.horizontal__reveal__block-left {
    background: blue;
    left: 0;
}

.horizontal__reveal__block-right {
    background: green;
    right: 0;
}




    
    
    
    Document

transition issue: z-index over width

1 Answers