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

Question

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

​

​

一切都很好，除了当我尝试使用背景大小调整图像大小时，圆形部分不会跟随。因为background属性根据其大小设置圆形部分图像。请参阅代码：

我将视频卡的背景大小设置为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>

​

看看代码变得多短！