プログラミング

プログラミング

【ちょっとした工夫でクールなイメージに】CSS3で作るホバーエフェクト3選!

2,270 views

読了時間 : 約1分54秒

現代のWebテクノロジーでは、数えきれないほどのギミックが存在しますが、それらを実装するのには最もシンプルで使いやすいCSS3がお勧めです。一昔前は、動的効果はJavaScriptなどに頼らなければいけませんでしたが、CSS3ではいずれ劣らぬクールなエフェクトを簡単に作ることが出来るからです。今回は、そんなCSS3で作るホバーエフェクトを3つ紹介します。

 

DEMO1

今回の中では最も簡単に実装できます。イメージにマウスオーバーすると、上のレイヤーを構成する画像が枠外に飛んでいき、キャプションが現れます。

画像は元記事を参照

 

・html

ulタグを使い、キャプションとイメージを包みます。ulタグのなかにdemo-1とeffectのクラスを加えるという点に注意しましょう。次のようになるはずです。

 

・CSS
Relative positionを設定し高さと幅を調整し、overflowをhiddenに設定します。effect classはボタンに対して-15pxのマージンを設けます。CSS3のトランスアクションを設定すれば下のようにスムーズに動作します。

 

DEMO2

マウスオーバーすると画像がスライドダウンして、その空いたスペースにキャプションが現れます。

画像は元記事を参照

 

・html

DEMO1のものと似るのですが、クラスとしてdemo-2を使い、さらに以下のようにzeroのクラスを加えます。

 

・CSS
CSSの設定は最初のDEMO1とさほど変わりませんが、今回はイメージを下にスライドさせなければいけません。位置を下へ96px調整すればこのようなギミックが出来上がります。これにもCSS3のトランスアクションを設定しています。

DEMO3

今回紹介する最後のデザインはマウスオーバーすると画像がスピンし、ひっくり返ってキャプションが見えるという仕組みです。

画像は元記事を参照

 

・html

これまでとは違った構造を用いることになります。HTML5のfigure要素を、そのなかにfigureキャプションを入れて使います。ulタグに使用するのはdemo-3のクラスです。

 

・CSS
イメージのポジションをrelative positionに設定して、backface-visivilityをhiddenに設定します。そしてfigcaptionをrotateYtransform:-180に設定して、イメージとキャプションが反転するように180と入力します。

 

いかがでしたか?CSS3で簡単にこれだけ見た目のいい動的効果が実装できることにびっくりされた方もいるのではないでしょうか。ちょっとした動的効果を加えて変化をつけたいときには、CSS3で上述のようなホバーを実装してみることなどお勧めします。

 

(※本記事は、3 cool CSS3 image hover effectsを翻訳・再編集したものです。)

おすすめ新着記事

おすすめタグ