CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15

自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。
リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。
CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。

共通のHTML・CSS

サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。
CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。

<figure>
  <img src="image.jpg">
</figure>

figure {
  width: 300px;
  height: 200px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

また、ここでの動きの紹介にはそれぞれアニメーションGIFを使用しているので、実際の動きや表示は以下デモページで確認できます。

Demo

Zoom In #1

Zoom In #1の実装イメージ

ホバー時に画像が拡大するエフェクトを付けたもので、実装にはCSSを下記のように記述します。
拡大率を変更したい時にはscaleの値、スピードなどを変更したい時にはtransitionの値をそれぞれ任意のものに変更してください。

figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

Zoom In #2

Zoom In #2の実装イメージ

同じくホバー時に画像が拡大するようなものですが、こちらはimgのwidthを変更することで画像サイズを変更し、先ほどとは違った感じで見せることができます。
実装にはCSSを下記のように記述します。

figure img {
  width: 300px;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  width: 350px;
}

Zoom Out #1

Zoom Out #1の実装イメージ

「1. Zoom In #1」で紹介したホバー時に画像が拡大するエフェクトの逆バージョンで、先ほどはホバー時にscaleの値を大きくしましたが、こちらは初期状態の時に値を大きくしておき、ホバー時に値を小さくすることで画像がズームアウトするエフェクトを実装したものです。
実装にはCSSを下記のように記述します。

figure img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: scale(1);
  transform: scale(1);
}

Zoom Out #2

Zoom Out #2の実装イメージ

こちらは「2. Zoom In #2」で紹介したホバー時に画像が拡大するエフェクトの逆バージョンで、実装にはCSSを下記のように記述します。

figure img {
  width: 400px;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  width: 300px;
}

Slide

Slideの実装イメージ

予めmarginを使って画像の位置を少しずらして配置しておき、ホバー時にそのmarginを消すことでスライド画像がスライドされるようなエフェクトを付けたものです。
使用する画像の横幅が「表示させたい領域＋スライドさせたい距離」よりも大きいものであれば、サンプルコードにあるscaleの指定は必要ありません。
実装にはCSSを下記のように記述します。

figure img {
  margin-left: 30px;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  margin-left: 0;
}

Rotate (+Zoom Out)

Rotate (+Zoom Out)の実装イメージ

ホバー時に画像が回転するエフェクトを付けたもので、更に「3. Zoom Out #1」で紹介したホバー時に画像がズームアウトするエフェクトも加えたものです。
実装にはCSSを下記のように記述し、回転する角度はrotateを、拡大率はscaleの値をそれぞれ変更することで任意の動きに変更できます。

figure img {
  -webkit-transform: rotate(15deg) scale(1.4);
  transform: rotate(15deg) scale(1.4);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}

Blur

Blurの実装イメージ

filterを使って画像にブラーエフェクトを付けたもので、今回のサンプルでは予めブラー効果を付けたものをホバー時に解除するというものになりますが、逆にホバー時にブラー効果を付けているのも見かけますね。
実装にはCSSを下記のように記述し、ブラー効果を調整したい場合は下記コードでblur(3px)と指定されている箇所の値を任意のものに変更してください。

figure img {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-filter: blur(0);
  filter: blur(0);
}

Gray Scale

Gray Scaleの実装イメージ

同じくfilterを使用して、こちらは画像をグレースケール変換したものです。
実装にはCSSを下記のように記述します。

figure img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

Sepia

Sepiaの実装イメージ

こちらもfilterを使用したタイプのもので、画像をセピア調に変換したものです。
実装にはCSSを下記のように記述します。

figure img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

Blur + Gray Scale

Blur + Gray Scaleの実装イメージ

上で紹介したfilterですが、複数の効果を組み合わせて使うこともできます。こちらは上で紹介したBlurとGray Scaleを組み合わせてみたもので、実装にはCSSを下記のように記述します。

figure img {
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-filter: grayscale(100%) blur(3px);
  filter: grayscale(100%) blur(3px);
}

Opacity #1

Opacity #1の実装イメージ

実装されているのを見かけることも多い、ホバー時にopacityを使って透過させたものです。
実装にはCSSを下記のように記述します。

figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  opacity: .5;
}

Opacity #2

Opacity #2の実装イメージ

先ほどと同様でホバー時にopacityを使って透過させたものなのですが、画像の親要素（今回のサンプルではfigure）に背景色を指定するだけで、少し違った見せ方をすることもできます。
実装にはCSSを下記のように記述します。

figure {
  background: #1abc9c;
}
figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  opacity: .5;
}

Flashing

Flashingの実装イメージ

ホバー時に画像が一瞬だけ点滅するようなエフェクトを付けたものです。
実装にはCSSを下記のように記述します。

figure:hover img {
  opacity: 1;
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
}
@-webkit-keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}

Shine

Shineの実装イメージ

こちらは正直もっとスマート且つ汎用性高い記述方法ありそうですが、ホバー時にキランと光が左から右へ流れていくようなエフェクトを付けたものです。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
}
figure::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
figure:hover::before {
  -webkit-animation: shine .75s;
  animation: shine .75s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

Circle

Circleの実装イメージ

GoogleのMaterial Designで用いられているような波紋エフェクトをホバー時に付けたものです。
実装にはCSSを下記のように記述します。

figure {
  position: relative;
}
figure::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  content: '';
  width: 0;
  height: 0;
  background: rgba(255,255,255,.2);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}
figure:hover::before {
  -webkit-animation: circle .75s;
  animation: circle .75s;
}
@-webkit-keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
@keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

もちろん対応ブラウザにもよりますが、問題ないブラウザであればこのようにCSSだけで手軽にいろいろな見せ方ができるので、写真のギャラリーページなどのように画像が沢山並んでいるようなページで何かエフェクトを付けたいときには非常に便利だと思います。
また、以前当ブログで書いた「CSSのみで実装するキャプションエフェクト 20」と組み合わせて使うのもおすすめで、こちらもCSSのみで簡単に実装することができるので、興味ある方は併せてご覧ください。