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

Posted 2023-03-06

【中文标题】在图像悬停时以圆形设置背景大小

【英文标题】：Setting background size in circle on image hover

【发布时间】：2021-10-16 05:19:23

【问题描述】：

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

除了我尝试使用背景大小调整图像大小时，一切都很好，圆圈部分没有跟随。背景属性根据其大小设置圆形部分图像。见代码：

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

【参考方案1】：

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

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

$('.video-card').mousemove(function (e) 
    $overlay.css(
        clipPath: `circle(150px at $e.offsetXpx $e.offsetYpx)`
    )
);

.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>

看看代码变短了多少！

【讨论】：

非常感谢，兄弟。我不知道 clipPath 但你让它工作得如此顺利。我肯定会更多地了解 clipPath。非常感谢，你拯救了我的一天。

不客气！ clip-path 是相当高级的属性。很多人对此一无所知。如果有帮助，请投票并选择我的答案:)

对不起，我希望我能投赞成票，但它是说我在获得 15 个声望之前是不允许的。

好的，请立即尝试。您还可以通过单击对勾来选择答案。