[CSS]シンプルに実装する画像のロールオーバーエフェクト

シンプルなHTMLで、ごく簡単なCSSで、画像もシンプルに一枚だけ使用して実装するロールオーバーエフェクトをDeveloper's Paradiseから紹介します。

How To Create Simple Css Image Rollover Effect
デモページ

HTMLは画像とテキストをdiv要素で括ります。

HTML

スタイルシートでのテキストの表示と非表示は、通常時はdisplayをnoneにし、hover時にはblockにして変更しています。

また、div要素にはCSS3の角丸が適用されています。