Почему строки изображений ниже перемещаются сверху?

Question

По какой-то причине при наведении на элемент весь следующий ряд смещается вниз.

Я выгляжу так, как много элементов в массиве, но я не думаю, что это важно. Я уверен, что проблема заключается в HTML и CSS. Таким образом, он создает ссылку, затем использует PHP для получения информации о ссылке, затем рисует div и имеет некоторый текст заголовка, а затем заканчивает ссылку.

Из CSS он устанавливает соотношение изображения padding-top. Я предполагаю, что проблема в позиционировании или трансформации, но я не уверен, как это исправить.

echo '<div class="column">';
$backdrop   = $results->poster_path;
if (empty($backdrop) && is_null($backdrop)){
    $backdrop =  '/images/no-gambar.jpg';
} else {
    $backdrop = 'https://image.tmdb.org/t/p/w300'.$backdrop;
}
echo '<a href="movie.php?id=' . $id . '"><div class="imageFramed" 
style="background-image:url('.$backdrop.');">';

echo '<h4 class="centered">'.$title.'</h4></div></a>';

echo '</div>';

Пример YouTube: Здесь .

А для CSS:

.imageFramed {
    position: relative;
    width: 100%;
    padding-top: 150%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5%;
    max-width: 100%; 
    margin: 5%;
    transition: transform .2s;
}
.imageFramed:hover {
    border: 1px solid red;
    -ms-transform: scale(1.01); /* IE 9 */
    -webkit-transform: scale(1.01); /* Safari 3-8 */
    transform: scale(1.03); 
}
.imageFramed::after {
    display: block;
    position: relative;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #000000 100%);
    margin-top: -150px;
    height: 150px;
    width: 100%;
    content: '';
    border-radius: 5%;
}

.colour-overlay {
    width: 100%;
    border: 1px solid red;
}
/*Title*/

.centered {
    position: absolute; 
    bottom: 25px; 
    left: 0; 
    width: 100%; 
    padding: 0px 10px 0px 10px;
    z-index: 2;
}

Answer 1

Вы должны указать свойство Размер коробки: Граница поля В вашем css:

Blockquote

html {
  box-sizing: inherit;
}
body {
  box-sizing: border-box;
}