ホバーエフェクトコピペまとめ

こんにちはマダラです。今回はフォバーエフェクトのコピペ集です。

画像とかに立体感を出したり、変化させるcssですね！
簡単に実装できて、何かとおしゃれなコスパの良いコードですし、コピペでまとめておきましょう！

ホバーエフェクトたちよ

ホバーでおっきくなっちゃった！！これはまぁまぁ汎用性たかそう。

ホバーでおっきくなってねじれちゃった！
こっちはあんまりみない仕様ですね〜〜

ホバーするとブラーが溶ける！

ホバーするとグレースケールが溶ける！

ホバーすると黒くなる！あれ？逆じゃない？？

cssのコピペ

写真のhtmlはこんな感じで、idのimgの番号が異なるだけ！

<figure><img id="img1" src="http://tkmserver.xsrv.jp/wp-content/uploads/2018/05/lgf01b201309281600-1024x682.jpg" alt="" /></figure>

cssはこんな感じ！ホバーはマウスでしか反応しないからスマフォ対応させるならontatchstartを活用するといいよ。
それについてはご自身で調べてクレメンス！

/*画像エフェクト集*/
/*ズーム*/
figure #img1 {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  width:300px;
}
figure:hover #img1, figure:active #img1 {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
/*回転ズーム*/
figure #img2 {
   -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
   width:300px;
}
figure:hover #img2 {
  -webkit-transform: rotate(15deg) scale(1.2);
  transform: rotate(15deg) scale(1.2);
}
/*ブラー効果*/
figure #img3 {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
   width:300px;
}
figure:hover #img3 {
  -webkit-filter: blur(0);
  filter: blur(0);
}
/*グレースケール*/
figure #img4 {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
   width:300px;
}
figure:hover #img4 {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
/*グレースケール＋ブラー効果*/
figure #img5 {
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
   width:300px;
}
figure:hover #img5 {
  -webkit-filter: grayscale(100%) blur(3px);
  filter: grayscale(100%) blur(3px);
}