鼠标悬停图片放大（圆形2）

代码比较简洁，推荐此效果：

HTML代码：

<div style="font-size:20px; font-weight: bold;">代码比较简洁，推荐此效果：</div>
<hr>
<div class="img-container">
<img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/11/17/171410_202824_3.jpg" class="rounded-circle">
</div>

CCS代码：

<style>
/* 定义图片容器的高度和宽度，以及设置图元溢出时隐藏 */
.img-container {
  height: 150px; 
	width: 150px; 
	overflow: hidden;
	border-radius: 50%;
}
/* 让图片填充整个容器 */
.img-container img {
  height: 100%; 
	width: 100%; 
	object-fit: cover; 
  transition: transform 0.5s ease-in-out;
}
/* 添加鼠标悬停效果 */
.img-container img:hover {
  transform: scale(1.2);
}
</style>