如何使用 CSS 和 JavaScript 实现鼠标悬停时显示部分重叠图片？

如何在 css 中实现部分重叠图像，根据鼠标位置显示特定图片？

你想将两张图片重叠，让下面的图像在鼠标移动时通过一个椭圆区域显示出来。以下是实现这一效果的方法：

先创建两个 div，每个 div 分别包含这两张图片。然后，给上面的 div 设置一个 mask-image 属性，该属性指向下面的图片。

.container {
  position: relative;  /* 设置容器为相对定位 */
}
.top-image {
  position: absolute;  /* 设置上面的图像为绝对定位 */
  top: 0;  /* 设置图像在容器中的初始位置 */
  left: 0;
  mask-image: url("bottom-image.png");  /* 设置遮罩图像 */
  mask-size: 100% 100%;  /* 设置遮罩图像的大小（它应与图像大小匹配） */
}
.bottom-image {
  position: absolute;  /* 设置下面的图像为绝对定位 */
  top: 0;  /* 设置图像在容器中的初始位置 */
  left: 0;
}

接着，应用一个圆形渐变，以创建一个椭圆区域，并根据鼠标位置设置该区域的位置和大小。

.container {
  ...
  overflow: hidden;  /* 隐藏超出容器的图像部分 */
  border-radius: 50%;  /* 设置圆形容器 */
  background: radial-gradient(50% 50%, circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);  /* 创建径向渐变 */
  -webkit-mask-image: -webkit-radial-gradient(50% 50%, circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);  /* 为 Webkit 浏览器创建 -webkit-mask-image */
}

在鼠标移动时，可以使用 javascript 来更新渐变的位置和大小。

此方法可以让您根据鼠标位置在部分重叠的图像上显示特定的图片区域。

以上就是如何使用 CSS 和 JavaScript 实现鼠标悬停时显示部分重叠图片？的详细内容，更多请关注其它相关文章！