How to make an overflow hidden only for box-shadow


Tags: html,css3

Problem :

I have an image (height: 500px) which has a box-shadow and which lays over a greenbox div (height: 350px). 150px of that image overlapping the greenbox div at the bottom.

How can I turn off the image's box-shadow after leaving the green div ?

Alternatively to the following code here is a screenshot link.

CSS snippet:

.wrapper {
  position:relative;
}
.wrapper .greenbox {
  position: absolute;
  top:0;
  height: 0;
  width: 100%;
  padding-top: 350px;
  background-color: #39a943;
  z-index:-999;
}
.wrapper img{
  box-shadow: 0 0 15px 2px #000;
  width:300px;
  height:500px;
}

HTML snippet:

<div class="wrapper">
  <div class="greenbox"></div>
  <img src="image.png" alt="example" />
</div>


Solution :

Set the shadow on a pseudo-element, and clip that

.test {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 200px;
    height: 200px;
    background-color: lightblue;
}

.test:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px; 
    right: 0px;
    box-shadow: 0px -10px 20px 10px black;
    clip: rect(-100px, 1000px, 100px, -100px);
}

fiddle


    CSS Howto..

    How to change hover background on links in css?

    PHP: _POST and CSS, how to show an active link

    How to Dynamically Fit image in screen using css

    HTML + CSS dropdown menu: how to add a button between each first-level link without breaking the alignment?

    How to call external CSS in presence of inline and internal?

    How to create a label inside an element and style it?

    CSS: How to create a
  • with 100% width
  • Hovering over a container div shows hidden div. When cursor is put over hidden div, behavior of container div changes

    CSS How to change 3 line (menu icon) color when hover

    How to repeat a menu without using iFrames or PHP in simple HTML/CSS or XML?

    How do I center a character in a box using CSS?

    How to preserve sibling element position when one sibling is absolutely positioned?

    How do I make the mobile view of my website not show certain elements?

    How do you manage css stylesheet files and inclusions in a large ruby on rails application?

    How to apply css class to a based on respective $value in a of that row in a repeat region

    HTML/CSS - How do I make divs to size according to their contents?

    How to get inline-blocks to sit side-by-side?

    How to display only the first few lines of a div (clamping)?

    CSS Grow on hover adds padding to the bottom of an image, how do I stop this from happening?

    CSS - how to hide the top of a container using CSS-height, vertical-align and overflow?

    How to make the green DIV fit right after 2 upper divs?

    HTML: How to add an image using CSS as linked style sheet

    How to hide element using Class; instead of using css function in JQuery? [closed]

    How to add css only to options page of a plugin in wordpress?

    How to render CSS conditionally in page

    How to concat js/css files and replace in html using gulp?

    float css only menu - how to modify on section2

    How to put bootstrap glow (used in the 'form-control' CSS class) on a div?

    How to alternate HTML table row colors using JSP?

    How to display a full-width grid of images that resizes and flows with the browser window with pure CSS