[CSS]シンプルなHTMLで実装できる!パネルの背景画像だけをズームさせるテクニック

パネルをホバーすると画像だけがズームするエフェクト、最近のWebサイトでよく見かけますよね。
実装方法はいろいろありますが、JavaScriptを使わず、シンプルなHTMLで実装するCSSのテクニックを紹介します。

パネルの背景画像だけをズームさせるテクニック

Zooming Background Images

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

私はクライアントに、下記のサイトで使っているエフェクトを使いたい、と頼まれました。

サイトのキャプチャ

Fitbit

このエフェクトはパネルをホバーすると、背景画像をズームさせ、クリック・タップすると詳細情報にリンクします。ポートフォリオなどのサイトでよく見かけ、ビジュアル面と情報の詳細を見せる両方で効果的です。

実装には多くの方法があります

このエフェクトを実現するには、多くの異なる方法があります。
一つの選択肢として、jQueryのプラグインを使う方法です。例えば、Magnificent.jsです。しかしこれは私の求めていたエフェクトとは少し異なり、軽量ではありません。

もう一つの選択肢は、img要素をパネルの中に配置し、CSSでそれを操作することです。これにはいくつかの利点があります、使用する画像をパフォーマンスやデバイスに適しているようにsrcsetでソースを設定することができます。

今回の要件ではエフェクトをCSSで完全に管理したいので、この方法を採用しました。

エフェクトの実装

最適なパフォーマンスを達成するために、私は画像の拡大を処理するためにCSSのtransformプロパティを使用することにしました。CSSアニメーションはハードウェアアクセラレーションの恩恵を受け、その結果としてアニメーションの他の方法より滑らかに表示されます。

HTML

使うのはimg要素ではなく、背景画像の役割を果たす親の内側のdiv要素に使用します。HTMLでその構造を見てみましょう。

CSS

最初に親要素のサイズを指定し、子要素の幅と高さを100%に指定。同様にエリアをカバーするスケール確保し、背景画像を設定します。

またdiv要素にホバーエフェクトを与えるので、カーソルがポインタになるように「cursor: pointer;」を親要素に加えます。

そして、子要素に影響を与える親要素にホバーのエフェクトを追加します。

使用する時は、ブラウザのサポートのためにベンダプレフィックスを加えてください。

エフェクトを終了させるために、子要素の通常の状態にトランジションを追加します。

カラーのオーバーレイを加える時は、::before疑似要素を使うことで実現できます。

これで親要素をホバーすると、子要素はカラーのオーバーレイを表示します。

ついでに、オーバーレイの上にテキストを加えてみます。
これはHTMLに、テキストの子要素を加える必要があります。

span要素にいくつかのスタイルを加えます。

span要素はホバーした時だけ、表示されるようにします。

これで完成です。

Image zoom on hover

モバイル対応

もしパネル全体がリンクで、ホバーで重要な情報を表示しないのであれば、このままでよいかもしれません。

しかし、ホバーした時の情報が重要であれば、タッチスクリーンでも動作するように.parent要素にonclickでエフェクトが動作するようにするとよいでしょう。

top of page

©2018 coliss