テーブルやマスクを使用せずにホバー時に CSS ズーム効果を作成する方法

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

質問:

マウスホバー時にズーム効果を作成するにはどうすればよいですか?テーブルやマスクを使用しない HTML 画像divs?

答え:

スケールで Transform プロパティを使用する

ズームを実現するには、CSS3 の Transform プロパティを利用することを検討してください。スケールを使ったエフェクトのようなもの。方法は次のとおりです:

HTML:

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="path/to/image.jpg" class="lazy" alt="Image hover effect">
    </div>
</div>

CSS:

.thumbnail {
    width: desired-width;
    height: desired-height;
}

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

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

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

デモ説明:

• scale() 値は、画像の元のサイズの乗数を示し、25% のズーム効果になります。
• transition プロパティは、画像のスムーズな遷移を指定します。
• このアプローチでは、追加の要素や CSS トリックの使用を回避し、目的のズームを実現するシンプルかつ効率的な方法になります。効果。

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