画像ホバー時にズームするエフェクトの実装方法

ウェブサイトで画像をホバーした際にズームするアニメーションは、ユーザーの目を引き、視覚的なインタラクションを強化するための効果的な方法です。今回は、CSSを使って簡単に実装できる「画像ホバーズームエフェクト」を紹介します。

1. CSSコードの全体構成

まず、今回使用するCSSコードは以下の通りです。

.zoom-wrapper {
  height: 200px;
  overflow: hidden;
  border-radius: 16px;
}
.zoom-wrapper img {
  object-fit: cover;
  transition: transform 0.8s;
  height: 100%;
}
.zoom-wrapper:hover img {
  transform: scale(1.5);
}

2. 各プロパティの解説

.zoom-wrapper クラス
.zoom-wrapper {
  height: 200px;
  overflow: hidden;
  border-radius: 16px;
}
  • height: 200px;
    コンテナの高さを200ピクセルに固定しています。これにより、画像の表示領域の大きさが制限されます。
  • overflow: hidden;
    コンテナの外にはみ出るコンテンツ(今回の場合はズームした画像の部分)が表示されないようにします。このプロパティがないと、ズーム時に画像がコンテナの外まで拡大表示されてしまいます。
  • border-radius: 16px;
    コンテナの角を16pxの半径で丸めています。このプロパティで、画像の角が滑らかに表示されるようになります。
.zoom-wrapper img スタイル
.zoom-wrapper img {
  object-fit: cover;
  transition: transform 0.8s;
  height: 100%;
}
  • object-fit: cover;
    画像がコンテナのサイズに合わせて切り抜かれ、比率を保ちながら中央に表示されます。このプロパティを使用することで、画像が変形せず、コンテナの全体を覆うようになります。
  • transition: transform 0.8s;
    画像がズームする際の変化を0.8秒かけて滑らかに実行します。ここで指定する時間を調整することで、ズームのスピードを変えることができます。
  • height: 100%;
    画像の高さをコンテナの高さに合わせています。これにより、画像がコンテナ内で完全に表示されるようになります。
ホバー時のエフェクト
.zoom-wrapper:hover img {
  transform: scale(1.5);
}
  • transform: scale(1.5);
    画像にホバーした際に transform プロパティを使用して画像を1.5倍に拡大します。scale の値を変更することで、ズームの倍率を調整できます。

3. 実装例

以下のHTMLコードを使って、このズームエフェクトを適用する画像を実装します。

<div class="zoom-wrapper">
  <img src="..." alt="画像の説明">
</div>
  • <div class="zoom-wrapper">
    画像を囲むコンテナで、ズームエフェクトを適用するためのスタイルが設定されています。
  • <img> タグ
    実際に表示される画像を指定します。src 属性には、画像のパスを指定し、alt 属性には画像の説明を設定します。

4. 効果と応用

このホバーズームエフェクトは、ギャラリー、プロダクトページ、ブログのビジュアル強化など、多くのシーンで使える汎用的なデザインテクニックです。例えば、ユーザーが商品をより詳細に確認したい場合や、特定の画像に注目を集めたい場合に非常に有効です。

5. まとめ

CSSのtransformプロパティとtransitionを使用することで、簡単にインタラクティブで視覚的に魅力的なズームエフェクトを実装できます。このテクニックをプロジェクトに取り入れることで、ユーザー体験を向上させるとともに、ウェブサイトのデザインにダイナミックな要素を加えることができます。ぜひ、実際にコードを試してみてください!

お知らせ

私たちは、初台、幡ヶ谷、笹塚、代々木エリアでWebサイト制作やLP制作を行っています。これらの地域にお住まいの方や、事業を展開している企業・飲食店様・お店を持たれている方に向けて、Webサイト制作ホームページ制作、さらに企業向けのコーポレートサイト制作を提供しています。お問い合わせなどの目的に合わせたデザイン性の高いLP制作も承っております。

この地域に特化したサービスを提供することで、地域のビジネスがオンラインで成長できるようサポートしています。また、地域のお客様向けに特別なプランもご用意しておりますので、興味のある方はぜひお問い合わせください。

お問い合わせいただければ、詳細なご提案やお得なプランについて、丁寧にご案内いたします。初台、幡ヶ谷、笹塚、代々木エリアの皆様、お気軽にご相談ください。

コメント

コメントする