Box shadow inner covered by another div - html

Question

I have a div that containing a inner box shadow, but these shadow is coverd by another div, i tried with postion:relative but nothing is changed.
Here is a example
CODE EXAMPLE
example-div{
background:#fff;
color:#000;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 15px;
width:260px;
height:250px;
border-radius: 100%;
border:6px solid red;
position: relative;
-webkit-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
}
Thanks in advance !

Answer 1

2 things you need to do - change the z-index of your picture so that it is behind your circular div, and then change the background of your circular div so that it is transparent instead of white.
.example-div{
background: transparent; /*this way you can see behind the circle*/
color:#000;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 15px;
width:260px;
height:250px;
border-radius: 100%;
border:6px solid red;
position: relative;
-webkit-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
}
.example-div img{
width:260px;
height:250px;
border-radius: 100%;
position: relative; /*needed for z-index*/
z-index: -1; /*positions behind the circular div, but you can still see because of transparent background*/
}
<div class="example-div">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper-18.jpg"/>
</div>