Adding a drop shadow to a div is pretty straight forward.
box-shadow: horizontal offset, vertical offset, blur*, spread*, color; OR box-shadow: 5px 5px 20px 4px #000;
I like to use rgba color though: rgba(red, blue, green, alpha)
Which looks like this: box-shadow: 5px 5px 20px 4px rgba(0,0,0,0.9); // 90% alpha here
Doing this is similar to the normal box shadow behavior except for the word “inset” at the beginning.
Insetting is done like this: box-shadow: inset 5px 5px 20px 4px rgba(0,0,0,0.9);
Placing this behavior over an image is a little trickier though. To accomplish this I need a wrapping div to apply the drop shadow to. In this case I was wanting a transparent highlighted border, but this concept can be used for drop shadows as well.
See the Pen CSS Inset Highlight on Image by Jeff Rainey (@rainey) on CodePen.