如何在Bootstrap5图片卡片上实现鼠标悬停位置圆形区域彩色效果

实现思路 #

通过两层叠加的同图结构配合CSS变量、mask属性和鼠标事件实现效果：

• 父容器背景使用彩色原图，子元素放置同一张图片，默认设置100%灰度滤镜覆盖在父容器上
• 鼠标移动时实时更新CSS变量记录鼠标在容器内的坐标，通过radial-gradient动态生成圆形透明遮罩，让对应位置露出底层的彩色原图

完整代码实现 #

HTML结构（适配Bootstrap 5卡片） #

<div class="card" style="width: 18rem;">
  <!-- 图片容器 -->
  <div class="img-hover-container">
    <img src="你的图片地址" class="card-img-top gray-img" alt="卡片图片">
  </div>
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片内容文本</p>
    <a href="#" class="btn btn-primary">按钮</a>
  </div>
</div>

CSS样式 #

/* 图片容器基础样式 */
.img-hover-container {
  position: relative;
  overflow: hidden;
  /* 背景设置为同一张彩色原图 */
  background-image: url("你的图片地址");
  background-size: cover;
  background-position: center;
}

/* 上层默认显示的黑白图片 */
.gray-img {
  width: 100%;
  display: block;
  filter: grayscale(100%);
  /* 初始化遮罩为全黑，完全显示上层黑白图 */
  -webkit-mask: radial-gradient(circle 100px at 0 0, transparent 0%, transparent 100%, black 100%);
  mask: radial-gradient(circle 100px at 0 0, transparent 0%, transparent 100%, black 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 1;
  transition: all 0.1s ease;
}

/* 悬停时激活遮罩效果 */
.img-hover-container:hover .gray-img {
  /* 遮罩位置绑定JS动态更新的CSS变量 */
  -webkit-mask: radial-gradient(circle 100px at var(--x) var(--y), transparent 0%, transparent 100%, black 100%);
  mask: radial-gradient(circle 100px at var(--x) var(--y), transparent 0%, transparent 100%, black 100%);
}

JS逻辑 #

// 获取所有图片容器
const imgContainers = document.querySelectorAll('.img-hover-container');
imgContainers.forEach(container => {
  const grayImg = container.querySelector('.gray-img');
  // 监听鼠标移动事件
  container.addEventListener('mousemove', e => {
    // 获取容器相对视口的位置
    const rect = container.getBoundingClientRect();
    // 计算鼠标在容器内的相对坐标
    const x = e.clientX - rect.left + 'px';
    const y = e.clientY - rect.top + 'px';
    // 更新CSS变量
    grayImg.style.setProperty('--x', x);
    grayImg.style.setProperty('--y', y);
  });
});

可调整参数说明 #

• 把radial-gradient里的100px改成其他数值，即可调整彩色圆形区域的大小
• 修改CSS里transition的参数，可调整动画的流畅度
• 如果不需要完全黑白效果，可调整filter: grayscale(100%)里的百分比数值

内容的提问来源于stack exchange，提问作者Tafseer Hussain