CODEWITHSUNDEEP
htmljquerycssimageanimation
Tafseer Hussain
Tafseer Hussain

Reputation: 33

Setting background size in circle on image hover

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>

Upvotes: 1

Views: 88

Answers (1)

Robo Robok
Robo Robok

Reputation: 22703

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!

Upvotes: 1

Related Questions