div is not completely hidden in an other div-CodePudding

I have made a div with specific width and height and make it position relative and made 3 other div as position absolute inside main div ; I have hide them with transform style.when i hover over main div all 3 divs shown; but middle div is not hidden completely before mouse hover.what can i do? I have Added Picture here. thanks.

HTML

<div >
    <div ></div>
    <div ></div>
    <div ></div>
</div>

CSS

.box {
        width: 350px;
        height: 350px;
        position: relative;
        background: antiquewhite;
        overflow: hidden;
    }
    .overlay:first-child{
        position: absolute;
        width: 33.34%;
        height: 100%;
        left: 0;
        top: 0;
        background: rebeccapurple;
        transform: translateY(100%);
        transition: transform 1s;
    }
    .overlay:nth-child(2){
        position: absolute;
        width: 33.3333333%;
        height: 100%;
        left: 50%;
        transform: translate(-50%,-100%);
        top: 0;
        background: firebrick;
        transition: transform 1s;
    }
    .overlay:last-child{
        position: absolute;
        width: 33.34%;
        height: 100%;
        right: 0;
        top: 0;
        background: green;
        transform: translateY(100%);
        transition: transform 1s;
    }
    .box:hover .overlay:not(:nth-child(2)){
        transform: translateY(0);
    }
    .box:hover .overlay:nth-child(2){
        transform: translate(-50%,0);
    }

CodePudding user response：

Your problem is not reproduceable, at least not with Firefox, where it works as expected. So it might be a browser issue.

However, to avoid that glitch, you can simply set the transformY parameter to a slightly higher value, like -101%, which should hide it completely:

.box {
  width: 350px;
  height: 350px;
  position: relative;
  background: antiquewhite;
  overflow: hidden;
}

.overlay:first-child {
  position: absolute;
  width: 33.34%;
  height: 100%;
  left: 0;
  top: 0;
  background: rebeccapurple;
  transform: translateY(100%);
  transition: transform 1s;
}

.overlay:nth-child(2) {
  position: absolute;
  width: 33.3333333%;
  height: 100%;
  left: 50%;
  transform: translate(-50%, -101%);
  top: 0;
  background: firebrick;
  transition: transform 1s;
}

.overlay:last-child {
  position: absolute;
  width: 33.34%;
  height: 100%;
  right: 0;
  top: 0;
  background: green;
  transform: translateY(100%);
  transition: transform 1s;
}

.box:hover .overlay:not(:nth-child(2)) {
  transform: translateY(0);
}

.box:hover .overlay:nth-child(2) {
  transform: translate(-50%, 0);
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>