Html 如何将动画添加到悬停引导4卡？

我有一张卡片，我想应用一些基本的动画，如放大效果和边界颜色变化悬停。我试过几种方法，但都不管用。以前也有人问过很多类似的问题，我试了一些，但没有得到令人满意的结果

下面是我的代码-

HTML

由于某些原因，长方体阴影部分不工作。我还希望卡片上的文字在卡片缩放时稍微增长一点，并添加一个蓝色阴影

---

如何实现这一点？

首先要做的是检查是否正确导入了Bootstrap 4，以及是否导入了所有必需的文件（CSS、JS、jQuery和Popper） 最好遵循他们官方文件中的步骤-

盒子阴影代码似乎正在工作

对于缩放效果，您可以使用

transform:scale（scale\u value）

，因此首先要为read more类设置一个transition属性，然后悬停时通过添加一个transform属性来缩放它

下面是一个代码笔，其中包含您的代码，演示了如何执行此操作：

---

要获得平滑的过渡效果，请将“过渡”添加到要瞄准的元素中。然后，在悬停选择器中，更改尺寸标注，应以更平滑的过渡进行

颜色变化等也一样。。这只是其中一种方法

.card.阅读更多信息：悬停{
字体大小：14px；
}
.卡：悬停{
盒影：8px 8px 8px蓝色；
转换：比例（1.2）；
}
.卡片{
高度：200px；
宽度：200px；
边框：1px纯黑；
过渡：.3s；
保证金：3rem；
}

---

我认为这将得到您想要的结果

.card:悬停{
盒影：8px 8px 5px蓝色；
转换：比例（1.1）；
}

能否以片段的形式添加一个最小的可复制示例？请尝试添加您的实现。感谢您提供解决方案！它可以按需要工作。

<div class="container">
<a class=" text-decoration-none " href="">
<div class="card">
<img class="icon" src=""/>
<div class="card-text">
AlphaBetaGamma
</div>
<div class="d-flex align-items-center justify-content-end">
<span class="read-more">READ MORE</span>
<i class="fas fa-arrow-circle-right"></i>
</div>
</div>
</a>
</div>

.card .read-more:hover{
    font-size: 14px;
}

.card :hover{
    box-shadow: 8px 8px 8px blue;
}