[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ
Post on:2012年11月9日
sponsors
シンプルな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%);
}
sponsors
