【CSS】吸い付く様に見えるホバーエフェクトの作り方

ホバーするとボタンや検索ボックスが浮き上がって吸い付くように見えるCSSを作りたいけど、どうやって作るのかなあ？という疑問にお答えします。

ボクはプログラミング学習を初めて約1年。CSSについても苦戦しつつ少しずつ勉強を進めています。

2019年の現時点で見かけることが多い、ボタンや検索ボックスなどがフワッと浮き上がって吸い付いて見える方法をご紹介します。具体的には、画像の様な感じです。

ボクが作っていてうまくいかなかった方法もあります。ボク同様に初心者の方が間違えがちだと思うので間違えがちな方法も同時にご紹介します。

先に間違えがちな方法をご紹介します。

マウスでカーソルやポインターをホバーすると吸い付く様に見えるので、

transform:translateYプロパティでボックスを動かせばいいのでは？

と考えがちですが、実際やってみると、１pxでも動かすとガタつきが出て、お手本の様にうまくいきません。意外とハマりやすい罠です。

ボクも罠にハマってしまい、transitionプロパティで0.7sなど設定して、ゆっくりと動作させればいいのかな？

と考えて設定してみたものの、ボックスが動くとやっぱりガタついて見えます。

それでは、正しい方法を見てみましょう。

実は、ホバー時のbox-shadowプロパティの値を大きなる様に変更するだけでokです。

ポインターにボックスが吸い付いて見える＝ボックスの影が大きくボケて見える。

なので、影を大きくすれば解決します。

画像は冒頭のボックスの吸い付いて見えるCSSです。ホバー前のボカシは２pxですが、ホバー時のボカシを１０pxにしてみました。

すると、冒頭の画像の様に吸い付いて見える動作となります。

思ったよりもカンタンな作りですね。

以上、まとめると、吸い付いて見えるホバーエフェクトはbox-shadowプロパティを変更するだけで作れる、

間違いやすいのが、transformプロパティでtranslateYを使ってしまうとガタついて見えることですね。