2020-05-28 - CSS を使用してマウスオーバーで画像を拡大縮小するにはどうすればよいですか?

画像ズームエフェクトは、マウスをホバーまたはクリックすると画像をズームインするアプリケーションエフェクトです。この効果は主にウェブサイトで使用されます。この効果は、画像上にユーザーの詳細を表示したい場合に役立ちます。
マウスオーバー効果を作成するには 2 つの方法があります。

JavaScriptの使用

CSSの使用

この記事では、CSSを使用してこの効果を実現する方法を説明します。この記事には 2 つのコード部分が含まれています。最初の部分には HTML コードが含まれ、2 番目の部分には CSS コードが含まれます。 HTML コード: この記事では、HTML を使用して、ホバー効果で画像をスケーリングする基本構造を作成します。

css

>

CSS コード: このセクションでは、いくつかの CSS プロパティを使用して、マウスオーバー時に画像を拡大縮小します。スケーリング効果を作成するには、transition とtransform の 2 つのプロパティを使用します。