Как связать координаты div и координаты clip?

Question

[srnsdlmtn]

Уже очень долго пытаюсь это сделать, пробовал кучу всего, ничего не сработало

Вот то, что есть codepen.io/anon/pen/NNgKJJ

Я вырезал квадрат с помощью clip посередине, но мне нужно чтоб этот квадрат вырезался там, где находится блок с классом hole, чтобы в последующем сделать этот hole следующим за мышкой, а под ним бы просвечивала нижняя картинка, пробовал по разному, понятия не имею как можно сделать

Comments

[OVK2015]

В css:
.layer
{
position: absolute;
top: 0px;
left: 0px;
}

В js:
var man;
var selectionBound;
var selectionStartX,
selectionStartY,
selectionEndX,
selectionEndY;

$(document).ready(function()
{
man = $(".man");
man.on('mousedown', mouseStartSelection);
man.on('mouseup', mouseEndSelection);
});

function mouseStartSelection(event)
{
event.preventDefault();
selectionStartX = event.offsetX;
selectionStartY = event.offsetY;
console.log(event);
}

function mouseEndSelection(event)
{
event.preventDefault();
selectionEndX = event.offsetX;
selectionEndY = event.offsetY;
$(".one").css({'z-index': '9'});
$(".two").css({'z-index': '10'});

if(selectionStartX > selectionEndX)
{
startX = selectionEndX;
endX = selectionStartX;
}
else
{
endX = selectionEndX;
startX = selectionStartX;
}
if(selectionStartY > selectionEndY)
{
startY = selectionEndY;
endY = selectionStartY;
}
else
{
endY = selectionEndY;
startY = selectionStartY;
}

selectionBound =
'rect(' + startY + 'px, ' + endX + 'px, ' + endY + 'px, ' + startX + 'px)';
$(".two").css({'clip': selectionBound});
}

Answer 1

[Алексей Зуев]

codepen.io/anon/pen/zqzYVW