CSS3 変換のみを使用してホバー時の画像ズーム効果を作成するにはどうすればよいですか?

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

画像をズームインするホバー効果の作成は、CSS3 の Transform プロパティを使用して簡単に実現できます。 。このアプローチには最小限のコードが必要で、複雑なテーブルやマスク div を必要とせずに洗練された視覚的な拡張機能が提供されます。

実装

ズーム効果を作成するには、次の手順に従います。

1. HTML: 画像をコンテナ内に配置しますelement.

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Your image">
    </div>
</div>

2. CSS: CSS スタイルを適用して画像ズームを制御します。

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

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

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

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

• トランジション プロパティは、スケーリングの期間とイージング関数を定義します。効果。
• transform:scale() プロパティは、カーソルがコンテナ上にあるときに画像を拡大縮小します。

例

を参照してください。次のフィドルの例: https://jsfiddle.net/rkd3x4uc/

注:

• 画像にズームを直接適用するズーム プロパティは、インターネットでのみサポートされていますエクスプローラ。ブラウザ間の互換性のために、transform:scale() プロパティが推奨されます。
• コンテナの境界内でスケールされたイメージを制限するには、overflow: hidden を .image クラスに追加できます。

以上がCSS3 変換のみを使用してホバー時の画像ズーム効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。