这是一款基于纯 CSS 背景变换与过渡技术实现的悬停聚焦的人物介绍卡片。三张黑白人物照片以圆角卡片并排展示，鼠标移入某张卡片，照片会放大并向一侧偏移，人物姓名和竖排社交图标逐渐出现，边缘同时浮出细线。背景图、缩放和透明度都有对应过渡。它适合人物介绍、团队成员和采访专题，替换为自己的照片后即可延续这种聚焦式浏览方式。

人物介绍卡怎样在悬停时补充信息

照片放大时保持卡片轮廓。背景尺寸变化发生在固定圆角容器内，不会推开相邻人物卡片。
姓名与社交图标按悬停显现。默认画面保留照片，进入后再补充信息，减少静态状态下的文字干扰。
边框与投影加强卡片层次。细线和下方阴影共同强调当前人物，主体仍然是照片。

CSS背景放大与人像取景的关系

这里没有图片缩放脚本，主要依靠 background-size 从卡片宽度放大到更大的尺寸，同时把 background-position 从居中移向左侧。姓名和图标的 opacity 单独过渡，因而可以分别调整照片与文字出现的节奏。照片构图会直接影响放大后的取景，换图后需要逐张检查人物是否仍在画面内。

background-size: 600px;

人像卡片的照片、姓名和图标如何替换

姓名与图标结构在 index.html，三组照片路径位于 style.css 的 card0、card1 和 card2 中，源图放在 img。更换照片时要同时检查普通与 hover 两个状态的引用和取景位置；边框、投影和过渡时间也在 CSS 中。窄屏已允许卡片换行，避免原先固定最小宽度造成横向溢出。

人物悬停卡在手机与链接接入中的问题

图标点击后可以进入社交主页吗？

当前只是图标展示，没有实际链接。可以在图标外增加对应主页地址，并补充可访问名称，才能作为可用入口。

手机上能看到姓名吗？

当前姓名仍以 hover 为主要触发方式，不同触屏浏览器表现可能不同。若手机是主要入口，建议让姓名默认可见或增加明确的点击展开状态。

换照片后脸部被裁掉怎么办？

检查图片比例与背景定位，分别调整普通状态和悬停状态的 background-position，不必沿用原图的左侧取景。

适合团队、嘉宾、作者和人物专题页面。完整悬停样式与卡片布局可下载查看。