CSSのみの設定ですぐにできて導入も簡単？
マウスオーバー（hover）時に画像を拡大させる方法
サイトの制作時、クライアントの要望などによって細かな違いは各サイトによって生まれてくるかと思いますが、マウスオーバー時に何かしたい系やなにかの動きを付けたいという要望は意外と多かったりします。
今回のマウスオーバー（hover）時に画像を拡大させるというのもその1つで、実装は非常に簡単ですが、画像の枠線のカラーを変えるなどよりも動きがあって、ユーザー的にもそこがリンクか何かあるというのが目立ったりわかりやすくなるのでよく使われます。
今回はそんなマウスオーバー時の画像拡大をするCSSの設定について、実装とその注意点などについて解説しています。
動きの事例とサンプル
まずは実際の事例・サンプルを見た方が早いと思います。
下記にサンプルを用意してみたので、実際にマウスでhoverしてみると、中の画像が少し拡大されるかと思います。
これは基本の基本という形になりますが、ほとんどカスタマイズしていく際にもこの基本をベースとして変えていく事にはなるかと思いますので、まずはこの基本をしっかりと注意点含めて見ておきましょう。
それぞれの実際の解説
ということで実際のコードを見ていきましょう。
今回はスクリプトなどは不要で、HTMLとCSSのみで完成できますし、実際にはCSSの設定が主になります。
HTMLのコード
まずはHTMLを見ておきましょう。
といっても、今回のケースではHTMLはほとんど何も難しい事はありません。
いったんコードだけそれぞれ書いて、解説は後で行います。
<figure><img src="画像URL" width="" height="" alt=""></figure>CSSのコード
次にcssのコードを見ておきましょう。
必要なもののみで、装飾的なコードはいったん無くしています。
実際に使う際の装飾入りなどは最後にデモなどで用意していますのでそちらでも確認できるようにしています。
figure {
overflow: hidden;
cursor: pointer;
}
figure img {
transition: all 0.3s;
}
figure:hover img {
transform: scale(1.2);
}上記のHTMLとcssを書けば、装飾は無し（margin-topだけ設定しています）ですが、最初のデモで見せていたものと同じ下記のような動きになります。
コードの解説
では、実際にコードの解説です。
HTMLの解説
HTMLですが、先ほども書いたように特にこれといって何かあるコードではありません。
<figure><img src="画像URL" width="" height="" alt=""></figure>実際これだけです。
ただし、この時に重要なポイントとなるのが、画像のimgタグを囲う親枠が必要という点です。
上のコードでは<figure>を使っていますが、<p>でも<div>であっても構いませんが、何か必ず囲う親要素が必要となります。
こういったマウスオーバーで画像を拡大させる際はリンクなどの時に使われるケースが多いかと思いますので、横並びにする場合なら<li>で横並びにしていたりなどでも使えます。
CSSの解説
大事になるCSSですが、こちらもそれほど難しいものではありません。
figure {
overflow: hidden;
cursor: pointer;
}まずこの部分ですが、画像を拡大するとそのまま大きくなってしまうため、親の要素からはみ出る部分は非表示の設定をしています。これをしないと、そのまま枠からはみ出て、下記のように他のコンテンツを隠しての拡大になってしまいます。
これを抑えるために、overflow: hidden;を設定して、はみ出るところは非表示としており、このためにimgに親要素が必要になるという形です。
2行目のカーソル設定は付けてはいますが、実際には多くの利用ケースではリンクで使う事が多いと思われるため、その際はこの設定は不要になります。
figure img {
transition: all 0.3s;
}こちらはアニメーションの設定になります。
この設定が無かったとしても画像の拡大の設定に影響があるわけではないですが、この設定がないとアニメーションにならず、マウスオーバーした瞬間で画像が拡大、マウスオーバーが外れた瞬間に戻るとなるため見た目がいまちいです。
このようにならないために、transitionの設定を入れています。
figure:hover img {
transform: scale(1.2);
}最後のここが、画像の拡大する比率を決めています。
上記のコードでは、1.2と指定していますが、当然数字が大きくなればなるほど画像のサイズが大きくなります。
1.5などで指定すると下記のようになります。
実際は1.1～1.3くらいの間で指定するのが多いのではないかな感じます。
注意点などについて
これを使うにあたっての注意点としては、そこまで大きな注意点というわけではないかもしれませんが、実際にこれをやったとして、そもそもパソコン系のサイト閲覧時にしか意味がないという点です。
設定をしたとして、基本的にはスマホやタブレットはタップして直接操作をするため、通常の使い方ではマウスオーバーという概念がないため、この手の設定が意味をなしません。
実際にはスマホの場合はタップした瞬間、そこに触れてカーソルがホバーした感じになるため、タップした時に画像が拡大表示されつつそのままリンク先のページに移動するといったような動きになってしまいます。
クライアント的な満足度は高いですし、こういったちょっとしたワンポイント動きなどは隠し要素的なところもあったりで、特に年代が上の方であればあるほど演出みたいなイメージを抱くためか喜ばれやすいのでやって損はないとは思います。
とはいえ、今の時代はスマホファーストでアクセスの多くもスマホのため、実際に導入したとしてもそこまでこの動きをユーザーに体験・体感してもらえる率としては低いというのは理解しておきましょう。
実際に装飾などを入れたサンプル事例とコード
最後に、実際に使う時にはもう少し色々と装飾を入れて使う事が多いです。
ボーダーを付けたり、マウスオーバーでもそのボーダーカラーを変えたりなどなど、そういった装飾を入れたコードを書いておきます。
下記はそんなサンプルです。
実際のコードのサンプル
figure {
margin: 30px 0px 0px;
border: 2px #ddd solid;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s;
background: #000;
}
figure:hover {
border: 2px #000 solid;
}
figure img {
transition: all 0.3s;
}
figure img:hover {
transform: scale(1.2);
opacity: .8;
}簡単に解説しておくと、親要素に枠線を付け、それをhoverした際に枠の色を変えています。そこがアニメーションになるように、transitionも入れてあります。
親要素に背景色を設定しているのは、画像のホバー時にopacityで透過処理をしているためそこで少し暗くする設定になるために入れてあります。
このように色々な設定などを追加でやっていけば自分好みやクライアント毎で微調整などができるので、まずは基本の形をしっかりと作っておけば後は自由かなと思いますので、ぜひやってみましょう。
まとめ
今回はマウスオーバーをした際に画像が拡大表示される設定について見て来ました。ブログの記事一覧であったり、コンテンツなどの一覧ページなど、リンクが並ぶ形式の際にこの手の見せ方はよく使われるかなと感じます。
ユーザー的にもマウスオーバーした際に動きがあると、クリックできるなというのが視覚的によりわかりやすくなりますし、実際に使おうとした際にもそこまで難しい事でもないため割かし導入障壁も低いのではないかと思います。
あまりに拡大比率を上げすぎたりなど色々な設定をしすぎると逆に使い勝手が悪くなる事も考えられなくもないですが、基本はCSSの設定のみで導入できるので、基本系をしっかり理解しておけばそこまで難しくないかなと思うので、リンクで透過やボーダーのカラー変更だけというのに飽きたりしていたら、ぜひ試してみても良いのでは無いかと思います。
記事のシェアにご協力お願いします
