<div class="wrap">
  <h1>Main Div will resize and little boxes will stay in place </h1>

  <div class="handler r1"></div>
  <div class="handler r2"></div>
  <div class="handler r3"></div>
  <div class="handler r4"></div>
  <div class="handler r5"></div>
  <div class="handler r6"></div>

</div>

h1 {
  text-align: center;
}
.wrap {
  max-width: 800px;
  margin: 3rem auto;
  border: 5px solid black;
  background: #f9f9f9;
  padding: 10px;
  min-height: 400px;
  position: relative; /*stacking context for absolute elements */
  animation: resize 10s linear infinite;
}
.handler {
  position: absolute;
  width: 3rem;
  height: 3rem;
  border: 1px solid red;
  background: rgba(255, 255, 255, 0.9);
}
.r1 {
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}
.r2 {
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
}
.r3 {
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
}
.r4 {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
}
.r5 {
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
}
.r6 {
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
}
.wrap:hover {
  width: ;
}
@keyframes resize {
  0% {
    background: #f9f9f9;
    width: 800px;
    min-height: 400px;
  }
  25% {
    background: #ccc;
    width: 400px;
    min-height: 200px;
  }
  50% {
    background: #eee;
    width: 800px;
    min-height: 600px;
  }
  75% {
    background: #eee;
    width: 100px;
    min-height: 100px;
  }
  85% {
    background: #eee;
    width: 300px;
    min-height: 500px;
  }
  1000% {
    background: #f9f9f9;
    width: 800px;
    min-height: 400px;
  }
}