html - 如何使用 CSS 过渡来增加悬停时 Bootstrap 卡片的字体大小？

Question

我只是想增加 Bootstrap 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;
}