画像上に半透明のレイヤーで説明を表示
マウスオーバーで画像の説明を画像幅に調整したレイヤーで表示
jQuery
$(function () {
$('div.image').hover(
function () {
// 表示
$(this).css('width', $(this).children('img').width()).children('span').fadeIn('fast');
},
function () {
// 非表示
$(this).children('span').fadeOut('slow');
}
);
});
CSS
.image {
position: relative;
}
.summary {
display: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
HTML
<div class="image">
<img src="/img/thumb.jpg">
<span class="summary">88px × 62px</span>
</div>
サンプル
