画像マウスオーバー時のエフェクト例（拡大・回転・ぼかしなど）

WordPress個別サポート

画像にマウスオーバーしたときに効果を付けたいことがあります。たとえば、拡大したり回転したり、ぼかしたり、キャプションが飛び込んできたり、などです。そのようなときは「画像マウスオーバー　エフェクト」などで検索すると、参考になるページがいくつも見つかります。

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α
CSSのみで実装するキャプションエフェクト 20

以下は、サイトを参考にBizVektorの3PRエリアで画像のマウスオーバー時にキャプションが飛び込んでくるように加工した例です。

参考サイトのお世話になればBizVektor以外のテーマでも画像にエフェクトをかけられると思います。このページでは上記のサイトからコードを引用させていただき、マウスオーバー時のエフェクト例をいくつか紹介します。

画像を拡大する

CSSの「transform:scale」を使うと、画像のマウスオーバー時に拡大することができます。「scale(1.5)」のように倍率（縮尺比率）を指定します。数字を大きくすると大きく拡大されます。

/* 画像のマウスオーバー時に拡大する */
.home #content img {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.home #content img:hover {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

表示結果は次のようになります。

transitionは効果をふわっと適用するために使っています。「.3s」は0.3秒のことで数字を大きくすると、よりゆっくり変化するようになります。

「scale(1.5)」の部分で「scale(1.5, 3)」のように数字を2つ指定すると、X方向（横）、Y方向（縦）の倍率を別々に指定できます。実用的ではないかもしれませんが面白エフェクトには役立つかもしれません。

注意点ですが、画像にエフェクトをかけるといっても単純にimgタグにCSSを指定するとサイト全体の画像が影響を受けてしまいます。

img:hover {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

CSSセレクタをうまく記述して必要な部分の画像のみにエフェクトがかかるようにしましょう。この例では「.home #content img」（トップページの本文の画像）のみに影響するようにしています。

画像を回転する

CSSの「transform:rotate」を使うと、画像のマウスオーバー時に回転することができます。「18deg」は時計回りに18度回転するという意味です。逆に回転させる場合は「-30deg」のように負の数を指定します。

/* 画像のマウスオーバー時に回転する */
.home #content img {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.home #content img:hover {
  -webkit-transform: rotate(18deg) scale(1.8);
  transform: rotate(18deg) scale(1.8);
}

表示結果は次のようになります。

画像をぼかす

CSSの「transform:blur」を使うと、画像のマウスオーバー時にぼかすことができます。「4px」のピクセル数を大きくするとぼかし度合いが強くなります。

/* 画像のマウスオーバー時に回転する */
.home #content img {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.home #content img:hover {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

表示結果は次のようになります。

キャプションが飛び込む

要素を回転させる「transform: rotate」や透過度を指定する「opacity」などを組み合わせると画像マウスオーバー時にキャプションが飛び込んでくるエフェクトも作成できます。

/* キャプションが飛び込む */
#content #topPr .topPrInner {
  position: relative;
  overflow: hidden;
}

#content #topPr .topPrInner h3 {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .6s;
  transition: .6s;
  opacity: 0;
  padding: 10px;
  color: #fff;
  font-size: 16px;
  border: none;
}

#content #topPr .topPrInner:hover h3 {
  top: 0;
  left: 0;
  opacity: 1;
}

上記のコードはほぼ、以下サイトからの引用ですが、BizVektorの3PRエリアで動作するようにCSSセレクタを変更しています。

【引用】CSSのみで実装するキャプションエフェクト 20

表示結果は次のようになります。

キャプションが回転する

同じく上記の参考サイトからの引用ですが、キャプションが回転しながら飛び込んでくるエフェクトは次のようになります。

/* キャプションが回転する */
#content #topPr .topPrInner {
  position: relative;
  overflow: hidden;
}

#content #topPr .topPrInner h3 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transform: rotate(90deg) scale(0);
  transform: rotate(90deg) scale(0);
  -webkit-transition: .6s;
  transition: .6s;
  opacity: 0;
  padding: 10px;
  color: #fff;
  font-size: 16px;
  border: none;
}

#content #topPr .topPrInner:hover h3 {
  -webkit-transform: rotate(360deg) scale(1);
  transform: rotate(360deg) scale(1);
  opacity: 1;
}

表示結果は次のようになります。

他にもさまざまなパターンがあります。最初に紹介したサイトを参考に画像にエフェクトをかけてみてください。

CSSの書き方