以下は、このデザイン効果を達成するための性能的な方法を示しているDylan Winn-Brownによるゲスト投稿です。最近、クライアントのwebサイトで作業している間、私はこのような効果を複製するように求められました。

このタイプの効果は、デザインが視覚的および情報的な詳細の両方を表示しようとするポートフォリオタイプの状況で特に使

多くの異なる可能な方法があります

私は前にこのような効果を作成したことがなかったので、私はこれを行うさまざまな方法を見て

一つのオプションは、jQueryプラグインを使用することでした。 これは私が後にしたかなりの効果ではなく、確かに非常に軽量ではありませんでした。別のオプションは、コンテナ内に<img>を配置し、CSSで操作することでした。 ここでは、ソースをsrcset設定して、使用されるイメージがパフォーマンスとデバイスに適しているようにするなど、いくつかの潜在的な利点 私の状況では、CSSで効果を完全に管理したかったので、私はそれに行きました。最適なパフォーマンスを実現するために、CSSのtransformプロパティを使用して画像の拡大を処理することにしました。 (CSSアニメーションはハードウェアアクセラレーションの恩恵を受け、その結果、他のアニメーション方法よりもスムーズに表示されます。 p>ではなく<img><div>親の中で画像として機能します。 構造は次のとおりです。

<div class="parent"> <div class="child"></div></div>

まず、親要素の寸法を指定します。 次に、子はwidth: 100%height: 100%;を使用して親を埋めることができ、背景画像を設定して、領域をカバーするように拡大縮小できます。

.parent { width: 400px; height: 300px;}.child { width: 100%; height: 100%; background-color: black; /* fallback color */ background-image: url("images/city.jpg"); background-position: center; background-size: cover;}

次に、子要素に影響を与えるホバー効果を親要素に追加します。 フォーカススタイルはアクセシビリティにも適しています。

.parent:hover .child,.parent:focus .child { transform: scale(1.2);}

可能な限り最高のブラウザサポートのために接頭辞を追加するツールを使

基本的な効果を仕上げるために、子要素の通常の状態にいくつかの遷移を追加することができます。

transition: all .5s;

カラーオーバーレイを追加したい場合は、::beforeのような擬似要素を使用することができます。:p>

.child::before { content: ""; display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(52, 73, 94, 0.75);}.parent:hover .child:before,.parent:focus .child:before { display: block;}

親要素にカーソルを合わせると、子要素に色のオーバーレイが表示されます！

最後に、オーバーレイに表示するテキストを追加する方法について説明します。 現在の子要素に要素を追加するには、次のようにします。

<div class="parent"> <div class="child"> <span>Hello</span> </div></div>

<span>いくつかのスタイルを与えることができます。

span { color: white; /* Good thing we set a fallback color! */ font-family: sans-serif; padding: 25%; position: absolute;}

.parent:P>

.parent:hover span,.parent:focus span { display: block;}

ライブデモ

CodePenのdylan（@dwinnbrown）によるホバーポートフォリオウェブサイトのペン画像ズームを参照してください。

モバイルサポート

コンテナがリンクであり、ホバー状態が重要な情報を明らかにしない場合は、そのままにしておくことができます。