Enable JavaScript in your browser. このウェブサイトはJavaScriptをオンにしてご覧下さい。

CSSでマウスオーバーしたときに画像を大きくする方法

  • 2014年9月30日
  • CSS

CSSでマウスオーバーしたときに画像を大きくする方法

画像にマウスをのせるとフワッと画像が大きくなるサイトを見かけますよね。クリックして大きくなるんじゃなくて、マウスオンで大きくなるやつです。jQueryやJavaScriptでやるのが多いようですが、今回はCSSでやる方法を紹介します。実際はjQueryやJavaScriptが分からないだけですが…放心状態の顔

transformを使う

CSS3になって新たに登場したtransformを使えば、拡大や縮小・回転・移動・傾斜を行うことができます。また変形する原点を決めることもでき、表現の方法が広がります。当ブログのあちこちで登場する「大きくなる顔」を実装した方法です。

画像を拡大するには

CSSによりマウスオンで画像を拡大するには、transformの「scale」というプロパティを使います。他にも指定できる値はありますが、今回は割愛します。scaleというのは「何倍するか」というプロパティのこと。ここで決めることは、マウスをのせたときに何倍にして表示するかということです。
ぼくの場合は元の画像(こんなの企む顔)が小さいので、縦横ともに5倍の大きさに拡大しています。そしてそれを何秒で拡大するのかを「transition」で指定します。

概要としてはまず拡大する画像のクラスを決め、そしてマウスオンでどうするかを決めるといった具合です。で、コードとしてはこんな感じです。

img.big {
	transition: 0.2s ease-in-out;
}
img.big:hover {
	transform: scale(5,5);
}

まず「big」というクラスを設定し「transitionは0.2秒」にしました。その後の「ease-in-out」はゆっくり開始しゆっくり終了することを意味します。そしてマウスオン時を指定する「hover」で「transform:scale」を縦5倍・横5倍に決めました。後は画像の位置やほかの要素との隙間をマージンなどで調整します。で、htmlタグはこんな風にすればOK。

<img class="big" src="○○○○" width="○○" height="○○" alt="○○">

widthとheightで指定された画像サイズが0.2秒で5倍になるという指定ということです。

ベンダープレフィックス

CSSの記述で「-webkit-」のようなものを見たことないでしょうか。これはベンダープレフィックスというもので、CSS3で新たに使えるようになったものを各ブラウザが先行的に実装していますよというのを表すものです。CSS3の仕様が確定してない現状において各ブラウザが草案的に実装している機能を動かすのに付ける必要があるということですね(説明がヘタ…疲れた顔)。

ではどのプロパティに着けるべきなのか?という疑問がでてきますよね。それを教えてくれるのがcaniuse.comというサイト。「Can I Use(キャナイユーズ)ドットコム」と読みます(発音いい!かっこつけた顔)。このサイトで検索窓にプロパティを入れると、どのブラウザのどのバージョンにベンダープレフィックスをつけるべきかを教えてくれます。

ベンダープレフィックスはブラウザの数だけあります。

  • -webkit-~Google Chrome,Safari
  • -moz-~Firefox
  • -ms-~IE
  • -o-~Opera

ということで「transform」と「transition」にもつけました。ちなみにベンダープレフィックスをつけないものも記述したほうがいいようです。

まとめ

まずは大きくする画像のクラスを決め「transition」を設定します。そして「hover」でマウスオン時を指定し、「transform:scale」で倍率を決めれば完成です。ちなみにスマホではマウスオンというものがないので表示されないようにしてあります。

もしもドロップシッピングで稼ぐためのブログページトップへ戻る