Blur - text-shadow

This blur effect was achieved via text-shadow and hiding the text color.

HTML

<div id="oFilterDIV" style="position: absolute;     top: 50px;     left: 10px;     width: 240px;     height: 160px;    padding: 10px;     font: bold 13pt verdana;
    background: yellowgreen;     filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);">
    This is the div content.</div>

CSS

#blur-dropshadow { color: rgba(0,0,0,0); margin: 10px; text-shadow: 0px 0px 6px #000, 0px 0px 3px #000;
  -webkit-transition: all 0.5s ease; 
     -moz-transition: all 0.5s ease; 
      -ms-transition: all 0.5s ease; 
       -o-transition: all 0.5s ease; 
          transition: all 0.5s ease;
}
#blur-dropshadow:hover { color: #333; text-shadow: none;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='Brown', Positive='true')}

.lt-ie10 #blur-dropshadow {
    /* for IE7 */
    zoom: 1;
    color: #000;
    /* Implement the blur */
    filter: progid:DXImageTransform.Microsoft.Chroma(Color=#222222)
            progid:DXImageTransform.Microsoft.Blur(Strength=2);
    
    /*
     * fix the positioning, since the blur filter adds a
     * few pixels to the top and left
     */
    position: relative;
    top: -2px;
    left: -2px;
   }

.lt-ie10 #blur-dropshadow:hover {
    filter: none;
    top: 0;
    left: 0
}