I have two div elements - one called "divimg" which is fixed, and the other called "drag" which contains an image. I am currently using this image for dragging and resizing, with overflow set to visible on the divimg.
My question is, how can I blur the visible content within the red bordered area?
Here is the code I am working with, any suggestions would be appreciated:
<script type="text/javascript">
$(document).ready(function () {
$("#drag").draggable({ cursor: "move" });
$("#displayimg").resizable({ aspectRatio: true, handles: "all", maxHeight: "600", maxWidth: "600", minHeight: "100", minHeight: "100" });
});
</script>
<style type="text/css">
.draggable
{
cursor: hand;
overflow: visible;
left:22%;
top:50%;
cursor: pointer;
}
.resizable
{
width: 320px;
height: 200px;
/* border: 1px solid #bb0000;*/
overflow: visible;
}
.resizable img
{
width: 100%;
height: 100%;
}
.ui-resizable-handle
{
background: #065909;
border: 3px solid #fff;
border-radius:15px;
width: 9px;
height: 9px;
cursor: pointer;
z-index: 2;
}
</style>
<form id="form1" runat="server">
<div>
<asp:Panel ID="Panel3" runat="server" Height="373px" Width="518px" style="margin-top: 0px; margin-left: 0px; text-align: center; overflow:hidden" >
<div id="divimg" style=" height: 5.5cm; width: 8.6cm; left: 20%; position: relative; top: 68px; overflow:visble;" >
<div id="drag" class="draggable" >
<div id="res" class="resizable" style="position:relative; overflow:visible; ">
<asp:Image ID="displayimg" runat="server" Height="224px" Width="340px" src="images/group1.jpg" style="left:-3%; top:-3%; overflow:visible; " BorderStyle="Ridge" BorderWidth="2px" />
</div></div></div>
</asp:Panel>
</div>
</form>
</body>
SOMETHING LIKE THIS:
https://i.sstatic.net/b0F6c.png
I want to add a blur effect to the red bordered area in the image above. Any suggestions?