一覧表示などで使えるマウスオーバーのおしゃれエフェクトです。
ちょこっと入れるだけでも動きが出て印象が変わります◎

IEが消滅したのでコードが減ってかなりシンプルになりました。
昔はJSとかも使ってたのにねー。忘れちゃうので健忘メモ。

hoverで拡大

ポイントは、枠をひとつ増やすこと。
拡大したときに画像がはみ出ないように「overflow: hidden;」を忘れずに。

hoverで拡大＋暗くなる

filter: brightness(70%);

👆これだけで暗くなります。便利ー。

See the Pen hoverで拡大＋暗くなる by kaori yamazaki (@kaori-yamazaki) on CodePen.

hoverで暗く＋文字表示

タイトルなど文字を画像の上に乗せます。
今回はfigureとfigcaptionを使いましたが、before・afterの擬似要素を使ってもできます◎

See the Pen hoverで暗くなる＋文字表示 by kaori yamazaki (@kaori-yamazaki) on CodePen.

hoverで文字アニメーション

順番に文字を出してみた。

See the Pen hoverでメニュー表示 by kaori yamazaki (@kaori-yamazaki) on CodePen.

モノクロからカラー写真に

モノクロからカラーにする、その逆も。
「filter」の「grayscale」を使うとたった１行。

See the Pen hoverでモノクロからカラーへ by kaori yamazaki (@kaori-yamazaki) on CodePen.

hoverしたらグラデーション入れる

元の要素にグラデーションの背景を入れてます◎

See the Pen hoverでグラデーション by kaori yamazaki (@kaori-yamazaki) on CodePen.

最近実装したものあれこれでした。
codepenを埋め込んでみたかっただけです。

cssだけでできるのでぜひ。

在宅になってからセブンイレブンのアイスカフェラテを飲んでいます。
お茶するところが家の周りになくて。

家で作ってもいいのですが、ちょっと歩きたい。
場所を変えたい。
朝か午後にふらふらと買いに行きます。

セブンのアイスラテめっちゃうまい。こちらもぜひ。