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

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

デモのキャプチャ

Snazzy Hover Effects Using CSS
デモページ

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

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

デモのキャプチャ

実装のバリエーション

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

HTML

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

CSS

sponsors

top of page

©2018 coliss