PAGE TOP

CSSで実現する画像のロールオーバー

基本的なことなのですが、画像のロールオーバーはやり方がいろいろあるのでいつも「どうだったかな?」と過去のコードを見たり、Webで検索したりしてしまいます。
「コードが単純で、いちばん使いやすい」と感じる画像のロールオーバーをメモしておきます。

画像の用意

上下で通常時とマウスオーバー時の1枚の画像を作成します。

ロールオーバー画像

画像サイズ:横120px、縦70pxの場合。

CSS

.btn{
	display:block;
	background:url(画像のURL);
	width:120px; 
	height:35px;
	overflow:hidden;
	text-indent:-9999px;
}
.btn:hover{
	background:url(画像のURL);
	background-position:left bottom;
}

HTML

<p><a href="#" class="btn">ロールオーバーボタン(任意のテキスト)</a></p>

※ロールオーバー画像というのはだいたいリンクを貼ってボタンやバナーとして使うことが多いので、<a>タグにクラスを指定して使います。

デモ

ロールオーバー画像

用意した画像を上半分だけ表示させ、マウスオーバーした際に画像の表示位置を下揃えにすることで切り替えます。


マウスオーバー効果をフェードで表現

もう一つよく使うのが、画像は1枚ですがマウスオーバー時に透過させる表現です。
その時、ついでにフェード効果を与えて少しリッチな感じにします。

CSS

.fade{
    -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}
.fade:hover{
    opacity: 0.4;
    filter: alpha(opacity=60);
}

HTML

<img class="fade" src="画像のURL" alt="" />

デモ

日本の秋・富士山

※このデモはあえて画像を透過させた状態から、マウスオーバーではっきりさせるフェード効果を与えています。

アニメーション効果をCSSで実装する場合はブラウザがCSS3に対応している必要があり、ChromeやOpera、Firefoxなどのモダンブラウザでは問題ありませんが、最もシェアの高いMicrosoft Internet Explorerの、バージョン10以前についてはCSS3がサポートされません。
CSS3で出来る表現は多彩で、早くCSS3を自由に使えるようになってほしいと願う日々です。


同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •