Setting background size in circle on image hover

user_13886449 0
Viewed 76

I am making a hover effect on the image. I set the image to grayscale by default and when it hovered over, a circle follows the cursor and shows the colored part. Basically, there are two images. grayscale one is shown by default and on hover inside the circle, the colored part is shown.

check here

Everything is working good except when I try to size the image using background-size the circle part doesn't follow. As the background property sets the circle part image according to its size. See the code:

I set the background-size of video card to 100% to fill up its parent container but when I do it for the circle, the image is sized inside the circle.

$('.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>

animation css image html jquery
1 Answers

How about using clip-path instead of trying to achieve the same effect through positioning?

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>

See how much shorter the code became!

user_44037320
Related