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を自由に使えるようになってほしいと願う日々です。

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

  • カテゴリー

  •  

    〒162-0061 東京都新宿区市谷柳町37-505

    03-6380-0880平日9:00~18:00

    info@smileworks.biz

    copyright © 2012 smileworks,inc all rights reserved.