鼠标悬停图片会缩小特效

Quicker 您的指尖操作箱

HTML代码：

<div class="card">
<img src="AAA" class="card-img-top" alt="...">
<div class="card-body text-center">
Quicker 您的指尖操作箱
</div>
</div>

CSS代码：

<!-------------悬停后图片由大缩小---------------->
<style>
.card {
width: auto;
position: relative;
overflow: hidden;
}
.card img {
transition: all 0.7s ease-out;
width: 100%; /* 宽度自适应 */
height: 230px; /* 固定高度 */
transform: scale(1.1); /* 默认尺寸为1.2倍 */
object-fit: cover;   /*--- 保持比例不失调 --*/
}
.card:hover img {
transform: scale(1); /* 鼠标悬停时恢复默认尺寸 */
}
.card-body {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 10px;
box-sizing: border-box;
}
</style>
<!-------------悬停后图片由大缩小---------------->