画像上に半透明のレイヤーで説明を表示

マウスオーバーで画像の説明を画像幅に調整したレイヤーで表示

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>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。