【CSS】ホバー時に画像や要素を拡大表示する（transform: scale）

2025/06/25

ホバーで画像や要素を拡大表示する方法

マウスを乗せたときに画像やボタンなどが拡大されると、視覚的にインパクトが出て注目度がアップします。transform: scale()で実装可能です。

hover時に要素を拡大するCSSです。
「transition」を指定することで、自然な感じで拡大を表現できます。


.sample {
  transition: transform 0.3s;
}

.sample:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

.sample {

transition: transform 0.3s;

}

.sample:hover {

transform: scale(1.1);

transition: 0.3s;

}

数字が大きいほど拡大（例：1.2 で20%拡大）
transformにはrotateやtranslateも併用できます。

よかったらシェアしてね！