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

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

画像とかに立体感を出したり、変化させる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);
}

まとめ

まぁまぁ汎用性あるしまとめてみました!ざっくりすぎるけど、まぁ使うときにはこれを基準にちょっと修正加えれば簡単に利用できそうだ!

スポンサーリンク

気に入ったらシェア!

フォローする

スポンサーリンク