Как сделать что би при появлений кнопки на ховер, остальние блоки не реагировали на ресайз блока з кнопкой?

Question

[andrew_makar13]

Как сделать что би при появлений кнопки на ховер, остальние блоки не реагировали на ресайз блока з кнопкой?
Что би сраница не дергалась.
При етом изначально все блоки по висоте должни бить по размеру контента (не включая кнопки). А то снизу пустое место.

https://jsbin.com/karuvojiza/1/edit?html,css,output

Answer 1

[Nikita-Fast]

.list {
  list-style-type: none;
  display: flex;
  flex-wrap:wrap;
  width: 800px;
}

.card {
  min-width: 200px;
  background-color: tomato;
  margin: 10px;
  text-align: center;
  transition: 1s;
}

.card:hover {
  transform:scale(1.1);
  .btn {
    display: inline-block;
    opacity:1;
    visibility:visible;
  }
}

.btn {
  opacity:0;
  visibility:hidden;
  padding: 10px 20px;
  transform:translatey(-10px);
  transition:.4s;
}

Comments

[andrew_makar13]

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

[Nikita-Fast]

andrew_makar13, вопрос поправьте - допишите ...