I'm new to experimenting with code, and I've been playing around with trying to shrink an image to nothing at a central point. I've found some success using a mix of the code snippet below and relative positioning in my CSS.
$(function() {
$('#imageID').on('click', function() {
$(this).animate({
width: 0,
height: 0,
top: '185px',
left: '-2px'
}, 200);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>However, my goal is to modify this so that the image shrinks centered on the location where the click occurred. I've attempted absolute positioning and setting the top/left values to pageX/pageY (even assigning them to variables) but haven't had any luck.
If anyone has insight into how or if this can be achieved, I would greatly appreciate it. Thanks.