Edit in JSFiddle

<!--[if lt IE 7]> <div class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <div class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <div class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]>    <div class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <div class="no-js"> <!--<![endif]-->

    <h3 id="blur-dropshadow">This blur effect was created with text-shadow</h3>

</div>

#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; }

.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
}