[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ

シンプルなHTMLで画像を配置し、ホバー時にかっこいい新しいエフェクトを与える10個のスタイルシートを紹介します。
どのコードもコピペですぐに使えますよ。

10 Easy Image Hover Effects You Can Copy and Paste

• 全デモ共通のスタイル
• ホバーしたらズームで拡大
• ホバーしたらズームで縮小
• ホバーしたら水平にパン
• ホバーしたら垂直にパン
• ホバーしたら少し傾ける
• ホバーしたら回転しながらサークル状に
• ホバーしたら被写体をフォーカス
• ホバーしたら画像全体をぼかす
• ホバーしたら白黒に
• ホバーしたら明るくする

全デモ共通のスタイル

全デモ共通の枠とシャドウをつけます。

HTML

各デモのベースとなるHTMLです。
div要素のclassを変更して利用します。

<div class="pic">
  <img src="image.jpg">
</div>

CSS

各デモで共通で使用するスタイルです。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
 
body {
  background: #333;
}
 
.pic {
  border: 10px solid #fff; 
  float: left;
  height: 300px;
  width: 300px;
  margin: 20px;
  overflow: hidden;
   
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111; 
}

ホバーしたらズームで拡大

画像をホバーしたら、被写体を拡大するかのようにアニメーションでズームします。

デモページ

HTML

<div class="grow pic">
  <img src="image.jpg">
</div>

CSS

/*GROW*/
.grow img {
  height: 300px;
  width: 300px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.grow img:hover {
  width: 400px;
  height: 400px;
}

ホバーしたらズームで縮小

画像をホバーしたら、画角を大きくしたかのようにアニメーションでズームします。

デモページ

HTML

<div class="shrink pic">
  <img src="image.jpg">
</div>

CSS

/*SHRINK*/
.shrink img {
  height: 400px;
  width: 400px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.shrink img:hover {
  width: 300px;
  height: 300px;
}

ホバーしたら水平にパン

画像をホバーしたら、アニメーションで水平方向に移動します。

デモページ

HTML

<div class="sidepan pic">
  <img src="image.jpg">
</div>

CSS

/*SIDEPAN*/
.sidepan img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
 
.sidepan img:hover {
  margin-left: -200px;
}

ホバーしたら垂直にパン

画像をホバーしたら、アニメーションで垂直方向に移動します。

デモページ

HTML

<div class="vertpan pic">
  <img src="image.jpg">
</div>

CSS

/*VERTPAN*/
.vertpan img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
 
.vertpan img:hover {
  margin-top: -200px;
}

ホバーしたら少し傾ける

画像をホバーしたら、アニメーションで少し傾けます。

デモページ

HTML

<div class="tilt pic">
  <img src="image.jpg">
</div>

CSS

/*TILT*/
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

ホバーしたら回転しながらサークル状に

画像をホバーしたら、くるっと回転しながらサークル状にモーフィングします。

デモページ

HTML

<div class="morph pic">
  <img src="image.jpg">
</div>

CSS

/*MORPH*/
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

ホバーしたら被写体をフォーカス

画像をホバーしたら、アニメーションで特定の部分にフォーカスをあてます。

デモページ

HTML

<div class="focus pic">
  <img src="image.jpg">
</div>

CSS

/*FOCUS*/
.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

ホバーしたら画像全体をぼかす

画像をホバーしたら、ぼんやりとしたブラーのエフェクトをアニメーションで与えます。

デモページ
※Webkit系ブラウザのみ

HTML

<div class="blur pic">
  <img src="image.jpg">
</div>

CSS

/*BLUR*/
.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.blur img:hover {
  -webkit-filter: blur(5px);
}

ホバーしたら白黒に

画像をホバーしたら、画像をアニメーションでモノクロ写真のようにします。

デモページ
※Webkit系ブラウザのみ

HTML

<div class="bw pic">
  <img src="image.jpg">
</div>

CSS

/*B&W*/
.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.bw:hover {
  -webkit-filter: grayscale(100%);
}

ホバーしたら明るくする

画像をホバーしたら、画像をアニメーションで明るくします。

デモページ
※Webkit系ブラウザのみ

HTML

<div class="brighten pic">
  <img src="image.jpg">
</div>

CSS

/*DARKEN*/
.brighten img {
  -webkit-filter: brightness(-65%);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.brighten img:hover {
  -webkit-filter: brightness(0%);
}