Отзывчивая проблема с созданием нарезанного слайдера

Я создаю слайдер среза в образовательных целях, чтобы попробовать адаптивный дизайн.

Я уже 3 дня пытаюсь сделать его отзывчивым, но все, что я пробовал, не сработало.

Всякий раз, когда кто-то наводит курсор на фон страницы, будет отображаться скрытый div с 4 изображениями внутри. И когда я увеличиваю масштаб, последнее изображение меняет положение.

Это мой код:

<div class="container">
   <div class="reveal unreveal">
    <div  class="caption">
     <div class="contContainer">
      <div class="imgContainer">
       <img src="css/image1.png" />
      </div>
      <div class="imgContainer">
       <img src="css/image2.png" />
      </div>
      <div class="imgContainer">
       <img src="css/image3.png" />
      </div>
      <div class="imgContainer2">
       <img class="yoloimg" src="css/image4.png" />
      </div>
    </div>
   </div>
 </div>
</div>

CSS:

body {
  background: #222;
  max-width:100%;
  min-width:80%;
}
.contContainer {
width:90%;
padding:5px;
margin:0 auto;
}
.imgContainer {
width:20%;
padding:0px;
margin:0 auto;
text-align:center;
position:relative;
float:left;
margin-left:5px;

}
.imgContainer2 {
width:38%;
padding:0px;
margin:0 auto;
text-align:center;
position:relative;
float:left;
}
.yoloimg {
width:94%;
height:auto;
}
.imgContainer img {
width:96.8%;
height:auto;

}
.unreveal {

  background: url("ayo_bottom.png") 0px 278px, url("ayo_top.png") 0px 0px, #ffffff;
  background-repeat: no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  background-size:contain;
  transition: background-position 0.3s ease;
}

 .unreveal:hover {
   background-repeat: no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  transition: background-position 0.3s ease;
  background: url("ayo_bottom.png") 0px 500px, url("ayo_top.png") 0px -50px, #ffffff;
  background-repeat: no-repeat;
  background-size:contain;
}

.reveal {
  max-width:1100px !important;
  width:100%;
  height:auto;
  min-height:800px;
  float: left;
  margin:0 auto;
}

div.caption {
        top: 32%; 
        max-width:1100px;
        position: absolute;
        margin:0 auto;
        display:none;
    background:#2b2a28;

}

Я использую Skeleton 2.0.4 (также использовал Bootstrap, но ничего не произошло). Я думаю, что проблема в том, что я использую 2 изображения для фона в классе .unreveal, но я не знаю, что еще мне нужно сделать. Я использовал max-width:everywhere, margin:0 auto, и у меня есть медиа-запросы от скелета.

Я загрузил его, если кто-то хочет взглянуть на него: тестовый сайт.

Заранее спасибо.

EDIT: после исправления репозиции изображения все еще остается проблема с container . Когда я увеличиваю масштаб, высота увеличивается, останавливаясь на 2400px изображении того, что происходит. Я использовал max-height:1100px для контейнера и тела, но это не работает. я использовал разные doctypes также безрезультатно.