CSS を使用してホバー時の画像ズーム効果を作成する方法-CSSチュートリアル-php.cn

CSS を使用してホバー時の画像ズーム効果を作成する方法

Linda Hamilton

リリース： 2024-12-04 15:00:22

オリジナル

126 人が閲覧しました

How to Create an Image Zoom Effect on Hover Using CSS?

CSS を使用したホバー時の画像のズーム効果

Web 開発では、マウスホバー時に画像にズーム効果を適用するのが一般的なデザイン要素です。 CSS3 変換を使用したソリューションを検討してみましょう。

ズーム効果のための CSS3 変換

CSS3 変換プロパティとscale() 関数を使用すると、画像にズーム効果を加えることができます。コードスニペットは次のとおりです。

HTML:

<div class="thumbnail">
    <div class="image">
        <img src="image.jpg" alt="Image">
    </div>
</div>

ログイン後にコピー

CSS:

.thumbnail {
    width: 320px;
    height: 240px;
}

.image {
    width: 100%;
    height: 100%;
}

.image img {
    transition: all 1s ease;
}

.image:hover img {
    transform: scale(1.25);
}

ログイン後にコピー

この例では、 image div には画像が含まれます。画像がホバーすると、scale() 関数を使用して画像が 1.25 倍に拡大されます。トランジションプロパティにより、スムーズなズームアニメーションが保証されます。

追加メモ

スケール値を調整して、希望のズームレベルを達成できます。
CSS オーバーフロー: 非表示にすることができます。画像 div に適用して、拡大縮小された画像のはみ出した部分を非表示にします。
Zoom プロパティは IE ではサポートされていますが、IE ではサポートされていません。他のブラウザ。

デモ

ライブデモは次のとおりです:

<div class="thumbnail">
    <div class="image">
        <img src="https://placeimg.com/320/240/nature" alt="Image">
    </div>
</div>

<style>
    .thumbnail {
        width: 320px;
        height: 240px;
    }

    .image {
        width: 100%;
        height: 100%;
    }

    .image img {
        transition: all 1s ease;
    }

    .image:hover img {
        transform: scale(1.25);
    }
</style>

ログイン後にコピー

以上がCSS を使用してホバー時の画像ズーム効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。