html - CSS boxshadow over an image -

i want place boxshadow on image. i'm trying following adds behind image, making not visible. how can done?

css , html:

    .box2 {          float: left;          height: 150px;          width: 150px;          box-shadow: inset 0px 0px 0px 10px #f00;      }

 <div class="box2"><img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" /></div>

problem:

jsfiddle demo: http://jsfiddle.net/lwm95h7q/

you can :after, example.

.box1{     height: 150px;     width: 150px;     background: green;     box-shadow:inset 0px 0px 0px 10px #f00;     float: left;     margin-right: 50px; }  .box2 {     position: relative;     float: left;     height: 150px;     width: 150px;     box-shadow: inset 0px 0px 0px 10px #f00; }  .box2:after {     position: absolute;     left: 0;     top: 0;     width: 100%;     height: 100%;     content: '';     box-shadow: inset 0px 0px 0px 10px #f00;     z-index: 1; } 

take @ fiddle: http://jsfiddle.net/skeurentjes/lwm95h7q/5/