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

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

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

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

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

HTML:

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" 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="/static/imghwm/default1.png" data-src="https://placeimg.com/320/240/nature" class="lazy" 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 サイトの他の関連記事を参照してください。