デザイン

デザイン

PR

画像のホバーエフェクト用CSSスニペット8選!簡単コピー&ペーストで画像の見た目や機能を大きくアップ

7,729 views

読了時間 : 約2分2秒

ウェブのトレンドは変わりやすく、サイトを最新に保つ作業はどれだけやっても終わりがありません。CSSを使えばウェブサイトのカスタマイズがあっという間にでき、新たな機能を追加することも簡単になります。時間が節約できるだけでなく、サイトのパフォーマンスも向上するでしょう。

 

ただし、CSSは慣れてしまえば快適ではあるのですが、その基本を学習し使い始めるのは大変です。美しいサイトを作るにはどうしても高いコーディングスキルが求められます。

 

それでも一度基本さえ習得してしまえば、そこからはCSSスニペットがあなたを助けてくれます。高度にデザインされたスニペットが数えきれないほど存在し、コピー&ペーストするだけで使うことができます。

 

この記事では見た目をより美しくしてくれる、画像のホバー時に使えるCSSスニペットをご紹介します。画像の見た目やホバー時の反応をあっという間に美しく変えることができますよ。

 

 

 

1.画像にタイトルを表示する

hover①

 

写真ギャラリーやポートフォリオに最適なスニペットです。画像に加えたタイトルがホバー時に表示されます。

 

 

 

2.画像にタイトル、価格、アイコンを同時に表示する

hover②

 

これもギャラリーやポートフォリオにぴったりで、こちらは価格を表示してくれます。ショッピングサイトにも使えます。

 

 

 

3.画像を拡大縮小、回転させて表示する

hover③

 

画像の上にタイトルを重ね、ホバーすると拡大縮小と回転のエフェクトをつけてくれます。

 

 

 

4.画像にタイトルとサブタイトルを表示する

hover④

 

ホバーすると画像の上にタイトルとサブタイトルが表示されます。CSSを使えば簡単に作れてしまいます。

 

 

 

5.角にタブのついたボタンを作る

hover⑤

 

ボタンのデザインに工夫を加えたいなら、このスニペットを使ってみてください。

 

 

 

6.画像の上にボタンを表示する

hover⑥

 

 

ブログやポートフォリオに最適です。ミニマルデザインなサイトで「もっと読む」ボタンなどを加えたい時に便利です。

 

 

 

7.画像にアイコンとタイトルを表示する

hover⑦

 

ユニークなエフェクトです。ホバー時にただタイトルをボタンを表示するだけでなく、アイコンも加えてくれます。ミニマルデザインと相性ぴったりです。

 

 

 

8.アニメーションするボタンを作る

hover⑧

 

アニメーションするボタンがあるとサイトがすごく格好よくなりますよ。

 

 

 

いかがでしたか?ここでは紹介しきれませんでしたが、クールな演出をしてくれるCSSスニペットはまだまだたくさんあります。スニペットを使ってあなたのサイトをもっと美しくしてみませんか?

 

 

 

 

※本稿は 「20 Image Hover CSS Snippets: Designer Cheat List」を翻訳・再編集したものです。

おすすめ新着記事

おすすめタグ