CSS3 переход свойства не работает при наведении

Question

Я хочу сделать наведение на элемент div, который выделит границу. Я использую свойство box-shadow: inset..., поэтому оно не расширяет мои элементы. Однако transition не работает, и это, вероятно, связано с тем, что в основном классе box-shadow не имеет свойства inset. Понятия не имею, как это решить ...

.card {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 2.5rem 0 rgba(207, 212, 225, 0.4);
}

.card--group {
  transition: all 0.3s ease-in-out;
}

.card--group:hover {
  box-shadow: inset 0 0 0 0.1875rem #54d1bd;
}

<div class="card card--group">

</div>

Answer 1

Попробуйте добавить атрибут в hover для .card - group: hover

.card {
  width: 100px;
  height: 100px;
  background: red;
  box-shadow: 0 0 2.5rem 0 rgba(207, 212, 225, 0.4);
}

.card--group {
  transition: all 0.3s ease-in-out;
}

.card--group:hover {
  width: 200px;
  box-shadow: inset 0 0 0 0.1875rem #54d1bd;
}

<div class="card card--group">

</div>

Answer 2

Поскольку у вас есть 2 разные тени, вы можете рассмотреть несколько box-shadow, и вы сможете переходить между ними.Вы показываете вставку и скрываете первую.

.card {
  width: 100px;
  height: 100px;
  box-shadow: 
    inset 0 0 0 0 #54d1bd,
    0 0 2.5rem 0 rgba(207, 212, 225, 0.8);
}

.card--group {
  transition: all 0.3s ease-in-out;
}

.card--group:hover {
  box-shadow: 
    inset 0 0 0 0.1875rem #54d1bd,
    0 0 0 0 rgba(207, 212, 225, 0.8);
}

<div class="card card--group">

</div>

Answer 3

.card {
  width: 100px;
  height: 100px;
  background: red;
  /* box-shadow: 0 0 2.5rem 0 rgba(207, 212, 225, 0.4); */
}

Я не знаю, что вы пытаетесь сделать с текущей тенью на .card, потому что я этого не вижу. Но если вы удалите это, ваш переход будет работать.