.container {
  width: 70vw;
  height: 65vh;
}

.box {
  width: 500px;
  height: 400px;
  transition-duration: 2s;
  transition-property: width;
  display: flex;
  justify-content: right ;
  align-items: center;
  
}
.boxx {
  width: 500px;
  height: 400px;
  transition-duration: 2s;
  transition-property: width;
  display: flex;
  justify-content: left ;
  align-items: center;
  
}

.container:hover .box {
  width: 1100px;
}

.container:hover .boxx {
  width: 1100px;
}

.one {
  background: black;
  opacity: 0.8;
  transition-timing-function: ease;
  position: absolute;
  right: 0px;
  width: 900px;
  padding: 200px;
}

.two {
  background: #3DCCC7;
  transition-timing-function: ease-in;
}

.three {
 
  transition-timing-function: ease-out;
}

.four {
  background: #B1F8F2;
  transition-timing-function: ease-in-out;
}

/*
  transition-delay: 0;
  transition-duration: 1s;
  transition-property: background;
  transition-timing-function: ease;
*/
/* .container {
  width: 100vw;
  height: 100vh;
}

.box {
  width: 200px;
  height: 200px;
  transition-duration: 2s;
  transition-property: width;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.container:hover .box {
  width: 600px;
}

.one {
  background: #07BEB8;
  opacity: 0.1;
  transition-timing-function: linear;
  position: absolute;
}

.two {
  background: #3DCCC7;
  transition-timing-function: ease-in;
}

.three {
  background: #9CEAEF;
  transition-timing-function: ease-out;
}

.four {
  background: #B1F8F2;
  transition-timing-function: ease-in-out;
} */

/*
  transition-delay: 0;
  transition-duration: 1s;
  transition-property: background;
  transition-timing-function: ease;
*/