こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回ご紹介するのは、画像にマウスを乗せたときに「油絵風」に変化するホバー演出です。
近年のWebデザインでは、単なる拡大やフェードだけでなく、アートや質感の変化を感じさせるインタラクションが人気を集めています。
今回の演出は、CSSのfilterプロパティを活用することで、JavaScriptなしでアート表現を実現できるのがポイントです。
「hoverで雰囲気を変えたい」「アート系サイトに個性を出したい」という方にぴったりの内容です。
それでは早速、実装の流れを見ていきましょう。
油絵風ホバー演出の基本構造
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
まずはHTMLの基本構造からです。
ここでは、シンプルに画像を1枚だけ配置し、マウスホバー時に変化させます。
<div class="oil-effect"> <img src="sample.jpg" alt="油絵風エフェクト"> </div> 画像をラップする要素（ここでは.oil-effect）を作っておくことで、
後ほどホバー時のスタイルを当てやすくなります。
CSSで油絵風の質感を作る
油絵風の見た目を出すには、filterを組み合わせて質感を調整します。
特に「ぼかし（blur）」と「コントラスト（contrast）」を組み合わせると、
絵の具を塗り重ねたような柔らかい質感を出せます。
.oil-effect img {
width: 100%;
transition: 0.8s ease;
}
.oil-effect:hover img {
filter: contrast(150%) saturate(120%) blur(1px);
transform: scale(1.02);
}
ここでは、contrastやsaturateで色味を強調しつつ、
blurで少し滲ませて油絵のような柔らかいタッチを表現しています。
transform: scale(1.02);を加えることで、
ふんわり浮き上がるような効果もプラス。
より“絵画風”に近づける工夫
もう少しアート感を強めたい場合、
CSSのmix-blend-modeを使って背景とのブレンドを加えるのもおすすめです。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
mix-blend-mode: multiply;を使うことで、
背景色と画像の色が掛け合わされ、まるで絵の具でキャンバスに描いたような質感が再現されます。
背景色を少しクリームがかった#faf4e8にすることで、
“キャンバス地”っぽい印象になるのもポイントです。
エフェクトの比較デモ
それでは、実際の見た目を比べてみましょう。
- 通常時：写真そのままの質感
- ホバー時：彩度アップ＋ぼかし＋コントラスト強調で油絵風に変化
- ブレンドモード追加：よりキャンバス調の柔らかい印象に
このように、わずか数行のCSSだけで、
まるでアート作品のような画像演出を作ることができます。
デザイン活用のヒント
この「油絵風」演出は、次のようなデザインに特におすすめです。
- 美術館・ギャラリーのサイト
- アートイベントや展示会のLP
- 写真家・クリエイターのポートフォリオサイト
- ブランディング重視のデザイン制作会社サイト
もし複数画像をグリッドで並べる場合でも、
.oil-effectをそれぞれの画像に適用するだけで簡単に統一演出が可能です。
まとめ
CSSのfilterとtransitionを活用すれば、
JavaScriptを使わずに視覚的に印象的な「油絵風」ホバーエフェクトを実装できます。
小さな工夫でサイト全体の世界観がぐっと高まるので、
ぜひ自分のデザインにも取り入れてみてください。
satokotadesignキャンペーン実施中！
