Search code examples
javascriptjquerycssimagebox-shadow

how to limit box shadow spread not more than parent width and height

i was wondering if box shadow spread and blur could limited to parent height and width? i am trying using z-index but i doesn't works.. any suggestion?

i have images like this the image

is it possible to limit the spread not over the edges of images? thanks for your help..

i was trying to change the index of the div inside the canvas tag (i changed the background image for future cropping)

----------edit answer------------- HTML

<div id="canvas" style="overflow: hidden; width: <?php echo $resolution[0]; ?>px; height: <?php echo $resolution[1]; ?>px; 
         background: url(<?php echo base_url($image_loc); ?>) no-repeat; background-repeat: no-repeat; 
         " class=""></div>

JS

$('.rectangle').css('box-shadow', '' + 0 + ' ' + 0 + ' ' + '220px ' + '220px ' + '#000');

my workflow is when image loaded i started to click the image and create selection with js and aftar the button with icon crop up there clicked it draws the box shadow.. just add the overflow: hidden

Solution

  • You need to add overflow:hidden on your parent class.

    Here are some examples with overflow:hidden :

    .wrapper{
/*A little bit of styling on the wrapper...*/
  display: inline-block;
  margin: 20px;
  float : left;
  padding: 20px;
  border : 1px solid black;
}

.oh
{
 overflow: hidden;
}

.picture{
  padding: 10px;
  border : 1px solid red;
  box-shadow: 0 0 100px 10px  red;
}
    <div class="wrapper oh">
  <div class="picture">Example with overflow:hidden on the parent class (.wrapper)</div>
</div>

<div class="wrapper">
  <div class="picture">Example without overflow:hidden on the parent class (.wrapper)</div>
</div>