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>