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

Question

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

CSS

#team .card {
  border: none;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
  color: grey;
  font-size: 1rem;

  transition: font 1s ease-in-out;
}

#team .card:hover {
  font-size: 1.3rem;
  color: white;
}

html

<div class="card bg-dark shadow">
    <div class="card-img-overlay d-flex align-items-end justify-content-end">
        <h6 class="font-weight-normal">
            foo bar 
        </h6>
    </div>
</div>

Как мне перейти к переходу?

Answer 1

Размер шрифта определяется тегом H6, поэтому добавление его в css решит его

#team .card {
  border: none;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
  color: grey;
  font-size: 1rem;

  transition: font 1s ease-in-out;
}

#team .card:hover h6 {
  font-size: 1.3rem;
  color: red;
}

Answer 2

Обновление приведенной ниже части в CSS.

.card:hover .font-weight-normal{
  font-size: 1.3rem;
  color: white;
}

Answer 3

Вот, пожалуйста:)

#team .card {
  border: none;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
  color: grey;
  font-size: 1rem;

  transition: 1s ease-in-out;
}

#team .card:hover {
  font-size: 1.3rem;
  color: red;
}

<div id="team">
<div class="card bg-dark shadow">
    <div class="card-img-overlay d-flex align-items-end justify-content-end">
        <h6 class="font-weight-normal">
            foo bar 
        </h6>
    </div>
</div>
</div>