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 apply text rotation in CSS?

    How to create a form for a petition? [closed]

    how to align elements using css in angular typeahead

    How to insert spaces/tabs in text using HTML/CSS?

    How can I eliminate the space above my list?

    How to turn off visjs active shadow box?

    How do I make this list not break lines when browser size is changed?

    How to make the height of the div take all the space?

    How to add styles programmatically?

    How can I create a nav bar with a repeat image inside?

    How can I get mobile safari to use the right CSS?

    How to target the chrome browser for Mac only?

    How can I make a DIV cursor and background color change if I hover over it?

    How to put the text at the center of inner div?

    How to have two sub-divs the same height as each other

    How to secure css and js files means end user could not download our css and js file?

    How to shrink the menu when mouse hover on a link using jquery

    how to add an overlaying color over an image with css

    How to set background-color to the length of the test in a jQuery UI accordion?

    How to modify self and other classes with CSS :hover?

    How do I detect that facebook app is loading page to change CSS?

    How to remove/ignore :hover css style on touch devices

    Inline blocks somehow don't get displayed in a straight line [duplicate]

    How can I display two images horizontally?

    How to get css height property of an object and add 20px to it?

    How can I get a rounded rectangle graphic to span across all columns within an ASP.NET GridView header row?

    CSS How to apply child:hover but not parent:hover

    How to control cursor/caret size with CSS

    How to remove or hide element using jquery or css

    How to interpret HTML multiple class names in the CSS renderization? What W3C says about it?