<div id="robbie">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/robby-the-robot.png" alt>
</div>

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="drop-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
  <feOffset dx="12" dy="12" result="offsetblur"/>
  <feFlood flood-color="rgba(0,0,0,0.5)"/>
  <feComposite in2="offsetblur" operator="in"/>
  <feMerge>
  <feMergeNode/>
  <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</svg>
#robbie {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/wall-texture.jpg);
  display: inline-block;
  background-repeat: no-repeat;
  background-size: cover;
}
#robbie img {
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
Color='#444')";
  filter: url(#drop-shadow);
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
  filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js