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

Question

Исаак

css

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

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

У меня есть сайт с двумя блоками (articlesItem и searchBar) под меню навигации(navbar). При наведении на блоки, они увеличиваются с помощью свойства "transform: scale(1.01)". Однако у блоков разная ширина, поэтому они увеличиваются неодинаково. Как мне сделать так, чтобы увеличение было одинаковым, не изменяя их ширины? 

Спасибо!

22 ноября 2023 г. 20:29

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы применить масштабирование одинаково к двум блокам, можно задать для них общий родительский блок с фиксированной шириной и с применением дочерних блоков с помощью свойств flex или grid.

Пример с использованием flexbox:

HTML:
```html
<div class="wrapper">
  <div class="block"></div>
  <div class="block"></div>
</div>
```

CSS:
```css  
.wrapper {
  display: flex;
}

.block {
  flex: 1;
  /* Стили масштабирования */
  transition: transform 0.3s;
}

.block:hover {
  transform: scale(1.1);
}
```

Пример с использованием grid:

HTML:
```html
<div class="wrapper">
  <div class="block"></div>
  <div class="block"></div>
</div>
```

CSS:
```css  
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.block {
  /* Стили масштабирования */
  transition: transform 0.3s;
}

.block:hover {
  transform: scale(1.1);
}
```

В обоих примерах блоки будут располагаться горизонтально рядом друг с другом и при наведении на них, они будут увеличиваться одинаково без изменения их ширины. Обратите внимание, что для создания эффекта масштабирования при наведении используется свойство transition.

Answer 2

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