パネルをホバーすると画像だけがズームするエフェクト、最近のWebサイトでよく見かけますよね。 実装方法はいろいろありますが、JavaScriptを使わず、シンプルなHTMLで実装するCSSのテクニックを紹介します。 Zooming Background Images 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私はクライアントに、下記のサイトで使っているエフェクトを使いたい、と頼まれました。 Fitbit このエフェクトはパネルをホバーすると、背景画像をズームさせ、クリック・タップすると詳細情報にリンクします。ポートフォリオなどのサイトでよく見かけ、ビジュアル面と情報の詳細を見せる両方で効果的です。 実装には多くの方法があります このエフェクトを実現するには、多くの異なる方法があります。 一つの選択肢として、jQueryのプ
![[CSS]シンプルなHTMLで実装できる!パネルの背景画像だけをズームさせるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/ef43b70cc6a162f1c12009ce51de6ba83db49b86/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016081602.gif)