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

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

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

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

HTML

<div class="rollover_img">
<a title="Ace Infoway India" href="http://blog.aceinfowayindia.com">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum. In volutpat. Vestibulum elit. Aenean eget enim vitae tellus bibendum pellentesque. Sed at est. Example Text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</a>
</div>

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

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