如何使子元素阴影显示在已溢出的父对象上方：隐藏？

Question

I need to have shadows in the img element, but since it's wraped in a div that's got overflow: hidden , the shadows are hidden as well. What could I adjust here to make the shadows appear?

.slider-content .slider-image{
    position: relative;
    float: left;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*width: 20%;*/
    cursor: pointer;
    z-index: 120;
    max-width: 218px;
    max-height: 135px;
    margin-right: 1.7%;
}
.slider-content .slider-image img{
    width: 100%;
    height: 135px;
    position: relative;
    box-shadow: 0 0 10px 5px #222;
}

The markup is as follows:

<div clss="slider-content">
  <div class="slider-image">
    <img src=".." />
  </div>
  <div class="slider-image">
    <img src=".." />
  </div>
</div>

Answer 1

Since you img will always fill the .slider-image , put the shadow on the .slider-image element.

.slider-content .slider-image{
    position: relative;
    float: left;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*width: 20%;*/
    cursor: pointer;
    z-index: 120;
    max-width: 218px;
    max-height: 135px;
    margin-right: 1.7%;

    box-shadow: 0 0 10px 5px #222;
}
.slider-content .slider-image img{
    width: 100%;
    height: 135px;
    position: relative;
}