Как можно реализовать такой hover?

Question

[Альберт Макс]

Интересная задачка есть в фигме, но никак не смог его точь в точь реализовать. Как можно сделать такой hover? Со смещением и увеличением элемента в соседний блок. Вот гифка с фигмы.

Comments

[imko]

Та хоспаде, flex-grow просто увеличивать при наведении у карточки

Answer 1

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

То что вам предлагают, возможно только с блоками в одном ряду, там для этого даже переменные не нужны, а если сетка в несколько рядов, то с js можно сделать примерно так:

Comments

[Альберт Макс]

а можно ли в исходном состоянии без смещения сделать ?

[Альберт Макс]

то есть, после наведения, так и остаётся, не возвращается в исходное состояние.

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

Альберт Макс, обновил пример, но учтите, что это пример на скорую руку и там есть что оптимизировать.

[Альберт Макс]

Виталий Першин, Хорошо, спасибо. Попробую оптимизировать

[imko]

А зачем тут скрипт? 0_о Если карточки имеют равную ширины это flex 1 1 0 у них, при наведении просто grow менять на бОльший
И калк ширины в котором захаркоден отступ это мощно)

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

imko, ну да, ну да, а теперь возьми свой пример и построй сетку не из двух блоков а из 4+, а потом приходи с пруфами, мощный ты наш)

Answer 2

[imko]

https://codepen.io/herr-imko/pen/MWZjZzZ

Comments

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

Попробуй еще, у тебя обязательно получится, не с первого раза, так со второго, мощный ты наш)

[imko]

Виталий Першин, да лан не обижайся

[Модератор]

Виталий Першин, imko, склоку раздувать не надо. Старайтесь писать строго по теме. Если считаете, что комментарии неуместны - пользуйтесь штатными средствами ресурса, раздувать флейм обсуждения комментариев и тем более переходить на личности не надо.

[Модератор]

Виталий Першин, imko, отправить обоих помолчать пару дней?

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

imko, повторю еще раз, залетел с умным видом, зафейлился, кинул жалобу, кто после этого обиженный?

Модератор,

отправить обоих помолчать пару дней?

Да хоть на месяц, только интересно за что? Какую полезную информацию несет его комментарий:

да лан не обижайся

Жалкая попытка выйти с поднятой головой, вместо того чтобы признать, что "да, так не работает, был не прав, решение с js работает".

[Модератор]

Виталий Першин, я вежливо попросил не развивать флейм вне темы вопроса, не обсуждать чужой трёп и не переходить на личности.
Тут не место для разборок «у кого больше ЧСВ».

Я попросил действовать исключительно в соответствии с правилами.

Вам плевать? Обидно. Но ладно, утрусь. Но помолчать вам придется.

Answer 3

[Константин]

Мне кажется (навскидку), что можно сделать в css пользовательскую переменную, с шириной
при наведении на слой прибавлять эту величину к ширине, а у соседнего слоя вычитать эту величину из ширины
все это делать через calc()
нужно поэксперементировать

Comments

[Альберт Макс]

Тогда второй блок, когда его очередь увеличиваться, то по ширине он просто сдвигается направо за пределы и элементы ломаются

[Константин]

Вот пример блоков, получилось даже без вычитания

<div class='wrapper'>
  <div class='left'></div>
  <div class='right'></div>
</div>

:root{
  --block-width: 100px;
}

.wrapper {
  display:flex;
  gap:10px;
}

.left{
  width:50%;
  height:100px;
  background-color:red;
}

.left:hover{
  width: calc(50% + var(--block-width))
}

.right{
  width:50%;
  height:100px;
  background-color:blue;
}

.right:hover{
  width: calc(50% + var(--block-width))
}

CSS можно немного оптимизировать

.wrapper {
  display:flex;
  gap:10px;
}

.wrapper > div {
  width:50%;
  height:100px;
  background-color:red;
}

.wrapper > div:hover {
  width: calc(50% + 100px)
}

[Альберт Макс]

Спасибо, попробую.

[Альберт Макс]

Harconnen, А как можно реализовать 4 блока ? в 2 ряда. У меня проблемы именно с 4 блоками.

[Загир Меджидов]

Альберт Макс, Можно создать вспомогательный блок .images(можно без стилей) и внутри данного блока уже использовать код от пользователя выше.

наглядный пример:

<div class="images">
  <div class="wrapper">
    <div class='left'></div>
    <div class='right'></div>
  </div>
  <div class="wrapper">
    <div class='left'></div>
    <div class='right'></div>
  </div>
</div>

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

Harconnen, Это будет работать только с двумя блоками, но не с сеткой