CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでホバー時に要素をズーム（拡大）表示する方法

CSSで要素にマウスカーソルを合わせたとき（ホバー時）に、その要素をズーム・拡大表示するには、transformプロパティとtransitionプロパティを組み合わせて使用します。以下に具体的なコード例を示します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    * {
        box-sizing: border-box;
    }
    .zoomDiv {
        padding: 50px;
        background-color: yellow;
        transition: transform 0.2s;
        width: 200px;
        height: 200px;
        margin: 70px;
        border-radius: 50%;
        border: 4px solid rgb(78, 37, 155);
    }
    .zoomDiv:hover {
        transform: scale(1.5);
    }
</style>
</head>
<body>
<h1>ホバーでズームするサンプル</h1>
<h2>下の要素にマウスカーソルを合わせると拡大されます。</h2>
<div class="zoomDiv"></div>
</body>
</html>

実行結果

上記のコードを実行すると、次のように黄色い円形の要素が表示されます。

CSSでホバー時に要素をズーム（拡大）表示する方法

この円にマウスカーソルを合わせると、要素が滑らかに1.5倍に拡大されます。

CSSでホバー時に要素をズーム（拡大）表示する方法

コードのポイント

  • transition: transform 0.2s; … 変化にかかる時間を0.2秒に設定し、拡大がスムーズに行われるようにしています。
  • .zoomDiv:hover … マウスカーソルが要素に重なったときに適用されるスタイルです。
  • transform: scale(1.5); … 要素を元のサイズの1.5倍に拡大します。数値を変更することで拡大率を自由に調整できます。

この手法は、ボタンやカード型のUIなど、ユーザーの注目を引きたい要素に対して効果的に活用できます。

  1. CSSでホバー時にトランジション（アニメーション）を追加する方法を解説

    CSSでホバー時にトランジション（滑らかなアニメーション効果）を追加するには、transitionプロパティと:hover疑似クラスを組み合わせて使用します。あらかじめ要素にtransitionを設定しておくことで、ホバー時の変化が瞬時に切り替わるのではなく、指定した時間をかけてスムーズに変化するようになります。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&q

  2. CSSアニメーションで要素を円形の軌道上に移動させる方法

    CSSアニメーションを活用すると、rotate（回転）とtranslate（平行移動）を組み合わせることで、要素をさまざまな方法で動かすことができます。 本記事では、このテクニックを応用して、要素を円形の軌道（サーキュラーパス）に沿って移動させる方法を解説します。 円形移動の仕組み ポイントは、@keyframesの中で以下の3つの変換を組み合わせることです。 rotate()：要素を回転させ、移動する向きを決める translateX()：回転させた方向へ要素を押し出し、中心からの距離を作る rotate()（逆回転）：要素自体の傾きを打ち消し、常に直立した状態を保つ アニメーションの進