CSS Элементы в столбцах находятся под верхней границей при преобразовании масштаба

Question

У меня есть 4 столбца изображений с использованием column-count, и я хочу, чтобы они масштабировались при наведении курсора мыши.

Первый столбец работает нормально, но следующие три будут находиться под верхней границей при преобразовании.

Я пробовал все виды полей и отступов, а также пробовал z-index, но это не помогло работа.

Вот и живи JSFiddle

Код:

.content{
    margin-top: 20px;
    background-color: black;
}

.photos img {
    margin-bottom: 10px;
    vertical-align: middle;
    height: auto;
    width: 100%;
}

.photos {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}

li img {
    -webkit-transition: 0.2s;
}


li img:hover {
    -webkit-transition: .5s;
    transform: scale(1.3);
}

<div class="content">
    <ul class="photos">
        <li>
            <img src="https://syndlab.com/files/view/5db9b150252346nbDR1gKP3OYNuwBhXsHJerdToc5I0SMLfk7qlv951730.jpeg">
        </li>

        <li>
            <img src="https://lh3.googleusercontent.com/proxy/t2UjB23Xy8xLCPcwavD_5pqDWQH8wx1tOggm85KZq22oyODukZGZyMDIfGHwIKyZj1U4JeAzn3t5bkgPXcV8pJ60udJ1eQ">
        </li>

        <li>
            <img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
        </li>

        <li>
            <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
        </li>

    </ul>
</div>

Answer 1

Вы можете переключиться на flexbox и добиться того же поведения без проблем.

Просто настройте вас CSS следующим образом:

.photos {
    display: flex;
}

li {
  width: 25%;
}

Вот рабочий живой Codepen: https://codepen.io/alezuc/pen/jObWjLm

Обновление:

Хорошо, поэтому, если вы хотите добиться того, что вы публикуете в комментарии ниже, я предлагаю вам перейти к чистому CSS подходу Мансори. Вот код: Удалите управление столбцами и список (ul / li) и используйте divs:

<div class="content">
   <div class="item">
      <img src="https://placehold.it/600x620.jpg">
   </div>
   <div class="item">
      <img src="https://lh3.googleusercontent.com/proxy/t2UjB23Xy8xLCPcwavD_5pqDWQH8wx1tOggm85KZq22oyODukZGZyMDIfGHwIKyZj1U4JeAzn3t5bkgPXcV8pJ60udJ1eQ">
   </div>
   <div class="item">
      <img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
   </div>
   <div class="item">
      <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
   </div>
   <div class="item">
      <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
   </div>
   <div class="item">
      <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
   </div>
   <div class="item">
      <img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
   </div>
   <div class="item">
      <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
   </div>
   <span class="item break"></span>
   <span class="item break"></span>
   <span class="item break"></span>
</div>

Вот код CSS:

.content {
  background-color: black;
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 960px;

  /* Optional */
  padding: 0;
  width: 100%;
  margin: 40px auto;
  counter-reset: items;
}

.item {
  width: 24%;
  /* Optional */
  position: relative;
  margin-bottom: 1%;
}

/* Re-order items into 3 rows */
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n)   { order: 4; }

/* Force new columns */
.break {
  flex-basis: 100%;
  width: 0;
  margin: 0;
  content: "";
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  transition: 0.2s;
}

img:hover {
    transition: .5s;
    transform: scale(1.12);
}

Вот работающий живой Codepen : https://codepen.io/alezuc/pen/MWayKaq

И здесь ссылка, где я получаю такой подход.

Answer 2

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

Я нашел 2 возможности сделать эту работу, во-первых, моей любимой: display: flex;

.content{
    margin-top: 50px;
    background-color: black;
}

.photos img {
    margin-bottom: 10px;
    vertical-align: middle;
    height: auto;
    width: 100%;
}

.photos {
    padding: 0;
    list-style: none;
    display: flex;
}

.photos li{
  flex-basis: 25%;
  padding: 0 5px;
  margin: 0;
}

li img {
    -webkit-transition: 0.2s;
}


li img:hover {
    -webkit-transition: .5s;
    transform: scale(1.12);
}

<div class="content">
    <ul class="photos">
        <li>
            <img src="https://syndlab.com/files/view/5db9b150252346nbDR1gKP3OYNuwBhXsHJerdToc5I0SMLfk7qlv951730.jpeg">
        </li>

        <li>
            <img src="https://lh3.googleusercontent.com/proxy/t2UjB23Xy8xLCPcwavD_5pqDWQH8wx1tOggm85KZq22oyODukZGZyMDIfGHwIKyZj1U4JeAzn3t5bkgPXcV8pJ60udJ1eQ">
        </li>

        <li>
            <img src="https://images.all-free-download.com/images/graphicthumb/bavarian_landscape_515460.jpg">
        </li>

        <li>
            <img src="https://cdn-ep19.pressidium.com/wp-content/uploads/2019/08/16-9-original-1.jpg">
        </li>

    </ul>
</div>

другие возможности, использующие настройки вашего столбца, сводятся к добавлению position: absolute к .photos img или float: left к .photos.

Редактировать: Я вижу, что Алессио создал свой ответ, когда я работал над моим, и он также использует float. Пожалуйста, примите его ответ как рабочий, если вы go с решением float.