Как сделать transform: scale() для двух блоков одинаковым?

Question

[flexpc]

Есть такой сайт. На странице articles под navbar'ом два блока (articlesItem, searchBar), для которых сделан trancform: scale(1.01) при hover. Смысл в том, что у этих блоков разная ширина, соответственно при наведении, они увеличиваются по разном. Мне необходимо сделать так, что бы их увеличение было одинаковым, не прибегая к изменении ширины. Как мне это реализовать? Спасибо!

<div className="main">
            <div className="content">
                <div className="articlesItem">

                </div>
                <div className="searchBar">
                    
                </div>
            </div>
        </div>

.main {
    display: flex;
    justify-content: center;
    align-content: center;
}

.content {
    width: 60%;
    display: flex;
    justify-content: center;
    align-content: center;
}

.articlesItem {
    justify-content: center;
    align-content: center;
    display: flex;
    width: 75%;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #E8E8EF;
    background: #FFF;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease 0s;
    padding: 10px;
}

.searchBar {
    width: 25%;
    justify-content: center;
    align-content: center;
    display: flex;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #E8E8EF;
    background: #FFF;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease 0s;
    padding: 10px;
}

.articlesItem:hover, .searchBar:hover {
    transform: scale(1.01);
}

Если что это сделано на react js, думаю это бесполезная информация, но на всякий случай укажу это.

Answer 1

[Shelipov]

Не сразу понял твой вопрос, но потом как понял)

Ну тебе для начала нужно понять относительно чего им увеличиваться одинаково.
Если ширина .content 1000 пикселей (например), то при scale = 1.01, ширина .articlesItem станет 757.5 (750 * 1.01), а ширина .searchBar станет 252.5 (250 * 1.01), т.е. увеличение на 7.5 и 2.5 пикселей соотвественно. У .articlesItem разница между состояниями 7.5 пикселей. Можно попробовать например привести .searchBar к такому же значению. 7.5 / 250 = 0.03 - получается нам нужно к его обычному масштабу (scale = 1) прибавить 0.03, получаем 1.03 для .searchBar.

Это так наброски, ширины у тебя в процентах, но есть еще padding'и и border'ы в пикселях, их тоже нужно учитывать, возможно поменять box-sizing

В итоге решением будет разные значения для scale у двух элементов

И вот так делать не хорошо transition: all 0.3s ease 0s; )
Лучше вот так transition: transform 0.3s ease 0s;

Answer 2

[Rsa97]

Блоки у вас увеличиваются одинаково, в одно и то же количество раз.
Если хотите, чтобы блоки увеличивались на одну и ту же величину, то для каждого блока делайте свой коэффициент, зависящий от размера блока.