在图像悬停时以圆形设置背景大小

Question

我正在对图像制作悬停效果。我默认将图像设置为灰度，当它悬停时，一个圆圈跟随光标并显示彩色部分。基本上，有两个图像。默认显示灰度一，将鼠标悬停在圆圈内时，会显示彩色部分。

一切正常，除了当我尝试使用背景大小调整图像大小时，圆圈部分不跟随。作为背景属性根据其大小设置圆形部分图像。见代码：

我将视频卡的背景大小设置为 100% 以填满其父容器，但是当我为圆圈这样做时，图像的大小在圆圈内。

$('.video-card').mousemove(function(e) {

  var offs = $(this).offset(),
    p = {
      x: offs.left,
      y: offs.top
    },
    mPos = {
      x: e.pageX,
      y: e.pageY
    },
    x = mPos.x - p.x - 75,
    y = mPos.y - p.y - 75;

  $('.gray', this).css({
    left: x,
    top: y,
    backgroundPosition: -x + 'px ' + -y + 'px'
  });

});

.video-card {
  position: relative;
  width: 100%;
  height: 950px;
  overflow: hidden;
  background-size: 100% !important;
}

.video-card-overlay {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: gray;
  filter: grayscale(100%);
  background-size: 100% !important;
}

.gray {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  display: none;
  border-radius: 50%;
}

.video-card:hover>.gray {
  display: block;
}

.video-gallery-section .container {
  max-width: 100%;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="video-card" style="background: url('assets/img/home/1.png') no-repeat">
  <div class="video-card-overlay" style="background: url('assets/img/home/1.png') no-repeat"></div>
  <div class="gray" style="background: url('assets/img/home/1.png') no-repeat"></div>
</div>

Answer 1

使用 clip-path 而不是尝试通过定位来达到同样的效果怎么样？

const $overlay = $('.video-card-overlay');

$('.video-card').mousemove(function (e) {
    $overlay.css({
        clipPath: `circle(150px at ${e.offsetX}px ${e.offsetY}px)`
    })
});

.video-card {
    height: 950px;
    position: relative;
    width: 100%;
}

.gray,
.video-card-overlay {
    background-image: url('assets/img/home/1.png');
    background-position: center center;
    background-size: cover;
    inset: 0;
    position: absolute;
}

.gray {
    filter: grayscale(100%);
}

.video-card:not(:hover) .video-card-overlay {
    display: none;
}

<div class="video-card">
    <div class="gray"></div>
    <div class="video-card-overlay"></div>
</div>

看看代码变短了多少！

在图像悬停时以圆形设置背景大小

Setting background size in circle on image hover

html

css

jquery

animation

image