【CSS】ホバー時に画像を拡大する方法

HTML/CSS

2024.07.07

Webページにインタラクティブな要素を追加するために、CSSで画像をホバー時に拡大する方法を紹介します。シンプルなコードで、ユーザーに視覚的な楽しさを提供しましょう。

目次

HTML
CSS
CSSコードの解説
サンプル
まとめ

HTML

まず、HTMLファイルを作成し、画像をコンテナ内に配置します。以下は、その例です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Zoom on Hover</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <img src="your-image.jpg" alt="Sample Image">
    </div>
</body>
</html>

CSS

次に、CSSを設定します。ホバー時の画像拡大効果を実現するために、transformとtransitionプロパティを使用します。

.image-container {
    display: inline-block;
    overflow: hidden;
}

.image-container img {
    transition: transform 0.3s ease;
}

.image-container:hover img {
    transform: scale(1.2); /* 1.2倍に拡大 */
}

CSSコードの解説

ここでは、各CSSプロパティの役割を詳しく解説します。

.image-container

display: inline-block;:画像をインラインブロック要素として扱います。
transformプロパティの変更に0.3秒のアニメーションを適用します。これにより、ホバー時の変化がスムーズになります。

.image-container img

transition: transform 0.3s ease;:transformプロパティの変更に0.3秒のアニメーションを適用します。これにより、ホバー時の変化がスムーズになります。

.image-container:hover img

transform: scale(1.2);:ホバー時に画像を1.2倍に拡大します。この値は必要に応じて調整できます。

サンプル

まとめ

CSSのtransformとtransitionプロパティを使用することで、ホバー時に画像を拡大する効果を簡単に追加できます。これにより、ユーザー体験を向上させることができます。ぜひ、自分のプロジェクトに取り入れてみてください。