设计目标
文章正文中的图片已经集成了 Fancybox 灯箱功能，点击可全屏查看。但从视觉反馈角度看，用户难以直观感知「这张图片可以点击放大」。常见做法是悬停时显示半透明蒙层和放大镜图标，明确提示可交互性。
CSS 实现
利用 ::before 和 ::after 伪元素分别实现蒙层遮罩和放大镜图标：
1.post-content a[data-fancybox] {
2 position: relative;
3 display: inline-block;
4 overflow: hidden;
5 border-radius: 8px;
6}
7
8.post-content a[data-fancybox]::before {
9 content: "";
10 position: absolute;
11 inset: 0;
12 background: rgba(0, 0, 0, 0.35);
13 opacity: 0;
14 z-index: 1;
15 transition: opacity 0.3s ease;
16 border-radius: inherit;
17}
18
19.post-content a[data-fancybox]::after {
20 content: "🔍";
21 position: absolute;
22 top: 50%;
23 left: 50%;
24 transform: translate(-50%, -50%) scale(0.8);
25 font-size: 2rem;
26 opacity: 0;
27 z-index: 2;
28 transition: opacity 0.3s ease, transform 0.3s ease;
29}
30
31.post-content a[data-fancybox]:hover::before,
32.post-content a[data-fancybox]:hover::after {
33 opacity: 1;
34}
35
36.post-content a[data-fancybox]:hover::after {
37 transform: translate(-50%, -50%) scale(1);
38}
实现要点
伪元素分工
::before负责半透明黑色蒙层，覆盖整个图片区域。使用rgba(0, 0, 0, 0.35)确保下方的图片依然可见::after负责放大镜图标，居中定位并配合scale实现微缩放动画
过渡动画
两个伪元素都使用 opacity 过渡，放大镜额外增加 scale 变换。悬停时图标从 0.8 倍缩放到 1 倍，产生微弹效果，增强交互反馈。
暗色模式适配
在暗色模式下，蒙层颜色需要微调：
1[data-theme="dark"] .post-content a[data-fancybox]::before {
2 background: rgba(0, 0, 0, 0.5);
3}
与 Fancybox 的配合
此样式方案完全独立于 Fancybox 的 JS 逻辑，不需要修改任何 JavaScript 代码。Fancybox 通过 data-fancybox 属性自动绑定点击事件，悬停效果仅做视觉增强，两者互不干扰。
如果文章中存在不带 data-fancybox 属性的普通图片链接，上述样式不会生效，避免对非灯箱图片产生误导。
兼容性说明
inset 属性是现代浏览器对 top/right/bottom/left: 0 的简写，Chrome 87+、Firefox 66+、Safari 14.1+ 均支持。如需兼容旧浏览器，可替换为：
1top: 0; right: 0; bottom: 0; left: 0;
整体实现仅需约 30 行 CSS，无需额外 JavaScript，对页面性能影响可忽略不计，却显著改善了图片区域的操作引导体验。
留言评论
期待你的想法评论加载中