如何在Elementor网站实现图片悬停时仅圆形区域还原色彩并隐藏顶部Logo

开发者阿泽

2026-4-30

实现图片悬停时圆形区域还原色彩的效果（适配Elementor）

我目前在用Elementor搭建网站，想实现一个特定的交互效果：鼠标悬停在图片容器上时，只有图片的圆形区域能移除黑白滤镜、还原原本色彩，其余区域保持暗调黑白的滤镜状态，类似圆形遮罩的视觉效果。另外还有两个关联需求：

图片上方的Logo要在悬停时隐藏
这个效果需要能在网站的多张图片上复用

之前我找过类似的实现方案，但大多是基于SVG做的，不符合我要基于图片开发的需求；还有一个示例效果接近，但我的场景里图片上方带有Logo，需要额外处理隐藏逻辑。

现有代码

CSS 部分

#logomuse { position: absolute; z-index: 10; }
.musebox:hover #logomuse { opacity: 0%; }
#musedescrizione{ visibility: hidden; opacity: 0; transition: visibility 0s, opacity .4s linear; }
.musebox:hover #musedescrizione{ visibility: visible; opacity: 1; }
.immagineboxmuse { filter: brightness(0.3) grayscale(100%); }
.musebox:hover .immagineboxmuse { filter: brightness(1.0) grayscale(0%); }
.musebox { transition: transform .4s; }
.musebox:hover { cursor: none; }

HTML 部分

<div class="musebox">
  <img id="logomuse" src='https://upload.wikimedia.org/wikipedia/commons/4/49/BBC_logo_white.svg'> 
  <div id="museboxprogetto2"></div> 
  <img class="immagineboxmuse" src='https://buffalo-niagaragardening.com/wp-content/uploads/2020/09/sunflower-square-400px-Stofko.jpg'> 
</div>

解决方案（可复用版本）

要实现圆形区域的色彩还原，我们可以通过双层图片叠加+圆形遮罩的方式来实现，同时保留你原有的Logo隐藏、描述显示逻辑：

优化后的 CSS 代码

/* 基础容器设置，确保定位正确 */
.musebox {
  position: relative;
  width: fit-content; /* 适配图片宽度 */
  transition: transform .4s;
  cursor: none;
}

/* Logo 定位与隐藏逻辑 */
.logomuse {
  position: absolute;
  z-index: 10;
  transition: opacity .4s ease;
}
.musebox:hover .logomuse {
  opacity: 0;
}

/* 描述框显示逻辑 */
.musedescrizione {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .4s linear;
  color: white; /* 可根据需求调整颜色 */
}
.musebox:hover .musedescrizione {
  visibility: visible;
  opacity: 1;
}

/* 底层黑白图片 */
.img-base {
  filter: brightness(0.3) grayscale(100%);
  display: block;
}

/* 上层彩色图片（圆形遮罩） */
.img-color-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--img-url);
  background-size: cover;
  background-position: center;
  clip-path: circle(150px at center); /* 调整圆形大小，150px为半径 */
  opacity: 0;
  transition: opacity .4s ease;
}
.musebox:hover .img-color-circle {
  opacity: 1;
}

优化后的 HTML 代码（可复用结构）

<!-- 第一个图片容器 -->
<div class="musebox">
  <img class="logomuse" src='https://upload.wikimedia.org/wikipedia/commons/4/49/BBC_logo_white.svg'> 
  <div class="musedescrizione">这里是图片描述内容</div>
  <img class="img-base" src='https://buffalo-niagaragardening.com/wp-content/uploads/2020/09/sunflower-square-400px-Stofko.jpg'>
  <div class="img-color-circle" style="--img-url: url('https://buffalo-niagaragardening.com/wp-content/uploads/2020/09/sunflower-square-400px-Stofko.jpg')"></div>
</div>

<!-- 第二个图片容器（复用示例） -->
<div class="musebox">
  <img class="logomuse" src='另一个Logo地址'> 
  <div class="musedescrizione">另一张图片的描述</div>
  <img class="img-base" src='另一张图片地址'>
  <div class="img-color-circle" style="--img-url: url('另一张图片地址')"></div>
</div>

方案说明

复用性优化：把原来的ID选择器改成类选择器，这样可以直接复制.musebox容器结构来复用效果，不用每次修改ID。
圆形色彩还原原理：
- 底层是始终保持黑白滤镜的图片
- 上层是用clip-path: circle()裁剪成圆形的彩色背景图，默认隐藏（opacity:0），悬停时显示
- 用CSS变量--img-url来绑定图片地址，方便复用时代码维护
保留原有交互：原有的Logo隐藏、描述显示、光标样式、容器过渡效果都完整保留，同时和新的圆形色彩效果完美结合

你可以根据需求调整clip-path: circle(150px at center)里的半径大小（150px），或者修改圆心位置（比如at 50% 30%）来适配不同的视觉需求。

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