CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld

自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。

[kohak_d]

imgブラー処理

[takahiro_kihara]

sepiaは、-webkit 以下も記述しないとダメっぽい。

[imyme_999]

#imyme9_design_memo

[torimoku]

cssアニメーション　拡大とか移動とかブラー、グレーアウト　カラー変更まで！（対象ブラウザ要確認）

[yuka-sunada]

“figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } figure:hover img { -webkit-transform: scale(1.3); transform: scale(1.3); }”

[jed_lee]

要素のhoverズーム系サンプルメモ。Blurなんかもテキスト表示と合わせて使えるよようにしておくと良い。

[minimum_sho]

画像のホバーエフェクトいろいろ

[kenzothe3rd]

メモメモ…

[winterfall]

css

[nffsjj]

CSSのみで実装することができる画像と相性が良さそうなホバーエフェクト。

[hr07jp]

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト

[tihata]

白黒やりたい

[matsumosan]

css

[emj1025]

アニメーション