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

harada 177views 更新:2015年2月3日

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

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

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません