JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="resizable">
<div id="overlay"></div>
<div id="anchor"></div>
</div>
</body>
CSS
#resizable {
position: absolute;
top: 30px;
left: 30px;
background: url(https://www.google.co.uk/logos/doodles/2014/st-davids-day-2014-5651391519391744.2-hp.jpg) no-repeat;
height: 163px;
width: 324px;
background-size: contain;
}
#overlay {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.3
}
#anchor {
position: absolute;
bottom: -5px;
right: -5px;
height: 10px;
width: 10px;
cursor: pointer;
background-color: red;
}
JavaScript
var $element = $('#resizable');
var elementCanBeResized = false;
var previousResizeX, previousResizeY, resizeDistanceX, resizeDistanceY;
$("#anchor").mousedown(function ()
{
elementCanBeResized = true;
});
$(document).mouseup(function ()
{
elementCanBeResized = false;
});
$(window).mousemove(function (mouseCoordinates)
{
if (!elementCanBeResized)
{
return;
}
if (typeof previousResizeX === 'undefined')
{
previousResizeX = mouseCoordinates.pageX;
previousResizeX = mouseCoordinates.pageY;
}
else
{
var newResizeX = mouseCoordinates.pageX;
var newResizeY = mouseCoordinates.pageY;
// resizing proportionally based on width change
if (newResizeX !== previousResizeX)
{
resizeDistanceX = newResizeX - previousResizeX;
previousResizeX = newResizeX;
previousResizeY += resizeDistanceX;
newWidth = $element.width() + resizeDistanceX;
newHeight = $element.height() + resizeDistanceX;
}
// resizing proportionally based on height change
else if (newResizeY !== previousResizeY)
{
resizeDistanceY = newResizeY - previousResizeY;
previousResizeY = newResizeY;
previousResizeX += resizeDistanceY;
newHeight = $element.height() + resizeDistanceY;
newWidth = $element.width() + resizeDistanceY;
}
$element.css({
height: newHeight,
width: newWidth
});
}
});