Overflow Hidden on Moving Div Not Working

StackOverflow https://stackoverflow.com/questions/19133779

문제

I'm trying to make a moving div in which there is a background image. Now, this div has an overflow: hidden. I've made two image tags containing the same image. The first one is a background wallpaper with grayscale(100%) and the second one is inside the div with the overflow of hidden.

Now, in jquery i put the mousemove event in order to move my div that has the image inside (The id of the div is '#color_peek'). But the image inside should not move, as if to give it a color magnifying glass sort of effect.

My problem is that the overflow: hidden is not working.

Here is the snippet:

$(document).ready(function() {
  $(document).mousemove(function(event) {
    $('#color_peek').css({
      top: (event.pageY - ($('#color_peek').width() / 2)) + 'px',
      left: (event.pageX - ($('#color_peek').height() / 2)) + 'px'
    });
  });
});
body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.wallpaper {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 1366px;
  height: 768px;
  -webkit-filter: brightness(100%) contrast(120%);
  z-index: -1000;
}

.actual {
  -webkit-filter: grayscale(100%);
}

#color_peek {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid white;
  border-radius: 50px;
  overflow: hidden;
}

#color_peek img {
  position: fixed;
  top: 0px;
  left: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <img src="http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg" class="wallpaper actual">
  <div id="color_peek">
    <img src="http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg" class="wallpaper">
  </div>
</body>

도움이 되었습니까?

해결책

Try using background: url('image_url') fixed; for your magnyfying glass element.

I have provided a simple example on top of which you should be able to develop your solution:

$(document).ready(function() {
  $(document).mousemove(function(event) {
    $('#color_peek').css({
      top: (event.pageY - ($('#color_peek').width() / 2)) + 'px',
      left: (event.pageX - ($('#color_peek').height() / 2)) + 'px'
    });
  });
});
body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background: url('http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg');
}

#color_peek {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-radius: 50px;
  background: url('http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg') fixed;
  -webkit-filter: brightness(150%) contrast(150%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="color_peek">
  </div>
</body>

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top