これは覚えておきたい！ シンプルなCSSで、画像をホバーすると拡大し、マスクまでしてくれる

画像をホバーすると拡大するCSSのテクニックは昔からありますが、画像の拡大分をoverflow:hidden;で非表示にするのではなく、clip-pathでクリッピングするとってもシンプルなCSSを紹介します。

実際の動作は、デモページをご覧ください。

See the Pen
画像をホバーすると拡大、マスク 2 by coliss (@coliss)
on CodePen.

また、OSレベルでアニメーション効果をオフにしている場合は動作しないようにすることもできます。

See the Pen
画像をホバーすると拡大、マスク by coliss (@coliss)
on CodePen.

OSレベルでのアニメーション効果をオン・オフにするには、

• Windowsでは「設定→アクセシビリティ→視覚効果→アニメーション効果」
• macOSでは「設定→一般→アクセシビリティ→表示→動きの抑制」
• Androidでは「設定→ユーザー補助→アニメーションの削除」
• iOSでは「設定→一般→アクセシビリティ→視覚効果を減らす」

をご確認ください。

HTMLは非常にシンプルです。divなどで囲う必要はありません。

画像を拡大し、マスクするCSSは、下記の通り。

画像を拡大するだけだとはみ出てしまうので、通常はoverflow:hidden;ではみ出た部分を非表示にしますが、clip-pathプロパティで拡大分を非表示にするクリッピング領域を作成します。

clip-pathプロパティについて詳しくは、下記をご覧ください。

CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント

元ネタは、下記ポストより。

img:hover {
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}

nice, n' simplehttps://t.co/X0pDcf4GBy pic.twitter.com/j5I0vpWGL4

— Adam Argyle (@argyleink) February 6, 2026