Как создать подобный ховер?

Question

[Алекс]

Доброго всем дня. Имеется макет вот с такими плитками


Т.е. в исходном состоянии они все одинаковые по ширине высоте. серая обводка 1px и снизу 4px желтая. При наведении карточка увеличивается по вертикали, появляется кнопка и обводка становится зеленой принимает толщину 2px, снизу все также 4. Не могу совладать с увеличением, увеличиваются все блоки разом в строке, а при пробежке по соседним блокам, заметно как кнопка исчезает в блоке нижнем.

Верстка с текущими стилями ниже

Answer 1

[WapSter]

Безопасный вариант, верстаешь кнопку делаешь невидимой, блоки увеличиваешь через transform кнопки opacity 1 всему задаешь анимацию и все четко отрабатывает. для внутренних элементов scale с отрицательным значением при ховере на блок.
Опасный вариант, поиграться с отрицательными марджинами.

Comments

[Алекс]

точно можно же задать для внутренних элементов scale отрицательный. Вылетело из головы сижу уже второй час.

[Сергей delphinpro]

Алекс, Я бы не стал так делать.
Сделайте рамку отдельным элементом (псевдо-элементом), чтобы увеличение ее размеров не влияло на содержимое карточки

[Алекс]

Сергей delphinpro, благодарю, попробую ваш способ тоже. Все шикарно! и не надо с долями у scale мучиться (всеровно чутка плыло что бы не подбирал по отрицательному scale)