【IE7・IE8対応】画像にオンマウスでアイコンをオーバーレイ表示する

画像リンクにマウスオンしたさいに黒背景を透過させて説明を表示したい場合のソースの書き方です。

HTML

<div class="imgBody">
<a target="_blank" href="リンクURL">
<div class="imgOverlay"><i class="icon-external-link"></i></div><img src="画像URL"></a>
</div>

CSS

.imgBody {
text-align:center;
margin-bottom: 10px;
position: relative;
}
.imgBody .imgOverlay {
display: none;
width: 100%;
height: 100%;
}
.imgBody a {
display: inline-block;
}
.imgBody a:hover .imgOverlay {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#66000000,EndColorStr=#66000000);
zoom:1;
display:inline-block;
}