Сдвиг блоков внутри контейнера при уменьшении контейнера

Question

Есть контейнер, в котором расположены блоки с изображениями. Задача состоит в том, чтобы изначально выбранный блок внутри контейнера был на весь экран, а затем плавно уменьшался вместе со всем контейнером до заданного размера, чтобы создавался эффект zoom-out. На данный момент есть две проблемы:

Блоки с изображениями налезают друг на друга при уменьшении контейнера, как сделать так чтобы этого не происходило?
Как сделать изначальный блок с изображением без отступа сверху и на весь экран?

img {
    width: 100%;
    line-height: 0;
}

.container {
    position: relative;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
    max-width: 1440px;
    min-width: 1024px;
    white-space: nowrap;
    overflow: hidden;
}

.container .ratio16-9 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.container:before {
    content: '';
    display: block;
    padding-top: 56.25%;
    background: crimson;
}

.small {
    -webkit-animation-name: smallb;
    -moz-animation-name: smallb;
    -o-animation-name: smallb;
    animation-name: smallb;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    -o-animation-duration: 3s;
    animation-duration: 10s;
    animation-fill-mode: forwards;
}

@-webkit-keyframes smallb {
    100% {
        width: 25%;
        left: 0;
        margin-left: 0;
    }

    0% {
        width: 100%;
    }
}

@-moz-keyframes smallb {
    100% {
        width: 25%;
        left: 0;
        margin-left: 0;
    }

    0% {
        width: 100%;
    }
}

@-o-keyframes smallb {
    100% {
        width: 25%;
        left: 0;
        margin-left: 0;
    }

    0% {
        width: 100%;
    }
}

@keyframes smallb {
    100% {
        width: 100%;
        left: 0;
        margin-left: 0;
    }

    0% {
        width: 600%;
        margin=top: 0;
        position: absolute;
    }
}

.map {
    height: 18.5%;
    transition: width 10s, height 10s;
    transform: translate(-50%. -50%);
    line-height: 0;
    background: transparent;
}

.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
    float: left;
    transition: all 1s !important;

}

.col-lg-1 {
    width: 8.33333333%;
}

.col-lg-2 {
    width: 16.66666667%;
}

.col-lg-3 {
    width: 25%;
}

.col-lg-4 {
    width: 33.33333333%;
}

.col-lg-5 {
    width: 41.66666667%;
}

.col-lg-6 {
    width: 50%;
}

.col-lg-7 {
    width: 58.33333333%;
}

.col-lg-8 {
    width: 66.66666667%;
}

.col-lg-9 {
    width: 75%;
}

.col-lg-10 {
    width: 83.33333333%;
}

.col-lg-11 {
    width: 91.66666667%;
}

.col-lg-12 {
    width: 100%;
}

<div class="container">
  <div class="ratio16-9 small">
        <div class="col-lg-3 map"></div>
        <div class="col-lg-2 map"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
        <div class="col-lg-7 map"></div>

        <div class="col-lg-2 map "><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
        <div class="col-lg-4 map"></div>
        <div class="col-lg-2 map"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
        <div class="col-lg-4 map"></div>

        <div class="col-lg-2 map"></div>
        <div class="col-lg-2 map"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
        <div class="col-lg-4 map"></div>
        <div class="col-lg-2 map"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
        <div class="col-lg-2 map"></div>

        <div class="col-lg-3 map"></div>
        <div class="col-lg-2 map"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
        <div class="col-lg-7 map"></div>


        <div class="col-lg-2 map"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
        <div class="col-lg-2 map"></div>
        <div class="col-lg-2 map"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
        <div class="col-lg-2 map"></div>
        <div class="col-lg-2 map"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
        <div class="col-lg-2 map"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>

        <div class="col-lg-12 map2"></div>

   </div>
</div>

БЛОГ НА HUSL

Сдвиг блоков внутри контейнера при уменьшении контейнера

Ответы (0 шт):