[CSS]カスタマイズも簡単、画像のホバー時にパネルを表示するスタイルシート

サイト構築 -CSS

スクリプト無しで、画像にマウスをホバーした際にテキストを配置したパネルを表示するスタイルシートをSix Revisionsから紹介します。

Snazzy Hover Effects Using CSS
デモページ

パネルのデザインはグラデーションを採用した透明度のあるもので、ボックスシャドウなどCSS3を使用して実装されています。

表示位置も真ん中だけでなく、さまざまな位置に表示が可能です。

実装のバリエーション

表示するテキストはtitle要素のデータを利用しており、HTMLは下記のようになります。

HTML

<li>
    <a href="#" title="Sunrise on the farm">
        <img src="img01.jpg" width="200" height="206" alt="Beautiful sunrise" />
    </a>
</li>

パネルの表示にはCSSの疑似要素を使用しており、デザインや表示位置はCSSなので簡単にカスタマイズができると思います。

CSS

ul a:hover:after,
ul a:focus:after
{
    background: rgb(255,255,255);
    bottom: 2px;
    content: attr(title);
    color: #000;
    display: block;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    width: 100%;
}