Как убрать пробел рядом со объектом при увеличении?

Question

[sqtr]

Появляется такой проел при увеличении объекта
Левый без увеличения, правый с увеличением

Comments

[Александр Епихин]

Покажите код

[sqtr]

Александр Епихин,

.post {
    display: inline-block;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.5);
    box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.5);
    margin: 0 auto;
    border: 2px solid #00a1ff;
    margin: 7px;
    width: 330px;
    height: 300px;
    overflow: hidden;
    text-align: center;
    background: white;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
    border-radius: 5px;
    transition: all 0.2s;
}

.post:hover {
    color: #00a1ff;
    transform: scale(1.04);
}

.catpost {
    position: absolute;
    background: #00a1ff;
    border-bottom-right-radius: 5px;
    padding: 3px;
    padding-right: 15px;
    padding-left: 15px;
}

[Александр Епихин]

Показывать код нужно на какой-нибудь облачной платформе. Например codepen.io

[Eugen]

sqtr, попробуйте zoom

.post:hover {
    color: #00a1ff;
    zoom: 1.04;
}

[Александр Епихин]

malente, вы даете очень дурной совет. Zoom это нестандартное свойство. Firefox его не поддерживает. Пруф.

[sqtr]

malente, с zoom нету анимации

[sqtr]

Александр Епихин, https://codepen.io/sqtr/pen/gOMYQVV

Answer 1

[Виталий Першин]

Comments

[Александр Епихин]

Появляется другой артефакт. Торчит верхний левый угол .catpost. overflow:hidden возвращает первоначальный "баг". Если в вашем примере добавить к .catpost правило border-top-left-radius: 5px; то все работает корректно.