目次
画像をぼかすCSSテクニック
画像にぼかし（ブラー）をかけることで、背景を柔らかく見せたり、注目を外したりする演出が可能です。CSSのfilter: blur()を使えば、簡単に実装できます。
基本のコード
|
1 2 3 4 5 |
.sample { filter: blur(5px); } |
hoverでぼかしをかける（または解除）
|
1 2 3 4 5 6 7 8 9 10 |
.sample { filter: blur(0); transition: 0.3s; } .sample:hover { filter: blur(5px); } |
補足
ピクセル値でぼかし具合を調整可能（例：blur(2px)〜blur(10px)など）
transitionを併用することで自然な効果が出ます。
