自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいという時に使えそうなエフェクトのサンプルです。CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。
共通のHTML・CSS
サンプルはいずれも以下のようなHTMLを使用しており、CSSについても以下を共通スタイルとして指定しています。
CSSでは幅や高さを指定している部分もありますので、参考にされる際はこれらを自身の環境に合わせて調整してください。
HTML
<figure>
<img src="image.jpg" />
</figure>CSS
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}また、動きの紹介にはそれぞれアニメーションGIFを使用しているので、実際の動きや表示は以下デモページで確認できます。
※以下で紹介する方法はブラウザによっては表示確認ができない場合や綺麗に表示されない場合がありますので、実際の動きを確認する際はChromeやFirefoxでご覧ください。
※デモページの確認はPCでご覧ください。
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 目次
1. Zoom In #1
ホバー時に画像が拡大するエフェクトを付けたもので、実装にはCSSを以下のように記述します。
拡大率を変更したい時にはscaleの値、スピードなどを変更したい時にはtransitionの値をそれぞれ任意のものに変更してください。
CSS
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);
}実際の動きは以下で確認できます。
2. Zoom In #2
同じくホバー時に画像が拡大するようなものですが、こちらはimgのwidthを変更することで画像サイズを変更し、先ほどとは違った感じで見せることができます。
実装にはCSSを以下のように記述します。
CSS
figure img {
width: 300px;
height: auto;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
width: 350px;
}実際の動きは以下で確認できます。
3. Zoom Out #1
「1. Zoom In #1」で紹介したホバー時に画像が拡大するエフェクトの逆バージョンで、先ほどはホバー時にscaleの値を大きくしましたが、こちらは初期状態の時に値を大きくしておき、ホバー時に値を小さくすることで画像がズームアウトするエフェクトを実装したものです。
実装にはCSSを以下のように記述します。
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);
}実際の動きは以下で確認できます。
4. Zoom Out #2
こちらは「2. Zoom In #2」で紹介したホバー時に画像が拡大するエフェクトの逆バージョンで、実装にはCSSを以下のように記述します。
CSS
figure img {
width: 400px;
height: auto;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
width: 300px;
}実際の動きは以下で確認できます。
5. Slide
予めmarginを使って画像の位置を少しずらして配置しておき、ホバー時にそのmarginを消すことでスライド画像がスライドされるようなエフェクトを付けたものです。
実装にはCSSを以下のように記述します。
※使用する画像の横幅が「表示させたい領域＋スライドさせたい距離」よりも大きいものであれば、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;
}実際の動きは以下で確認できます。
6. Rotate (+Zoom Out)
ホバー時に画像が回転するエフェクトを付けたもので、更に「3. Zoom Out #1」で紹介したホバー時に画像がズームアウトするエフェクトも加えたものです。
実装にはCSSを以下のように記述し、回転する角度はrotateを、拡大率はscaleの値をそれぞれ変更することで任意の動きに変更できます。
CSS
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);
}実際の動きは以下で確認できます。
7. Blur
filterを使って画像にブラーエフェクトを付けたもので、今回のサンプルでは予めブラー効果を付けたものをホバー時に解除するというものになりますが、逆にホバー時にブラー効果を付けているのも見かけますね。
実装にはCSSを以下のように記述し、ブラー効果を調整したい場合は下記サンプルソースでblur(3px)と指定されている箇所の値を任意のものに変更してください。
CSS
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);
}実際の動きは以下で確認できます。
8. Gray Scale
同じくfilterを使用して、こちらは画像をグレースケール変換したものです。
実装にはCSSを以下のように記述します。
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);
}実際の動きは以下で確認できます。
9. Sepia
こちらもfilterを使用したタイプのもので、画像をセピア調に変換したものです。
実装にはCSSを以下のように記述します。
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);
}実際の動きは以下で確認できます。
10. Blur + Gray Scale
上記で紹介したfilterですが、複数の効果を組み合わせて使うこともできます。
こちらは「7. Blur」と「8. Gray Scale」を組み合わせてみたもので、実装にはCSSを以下のように記述します。
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);
}実際の動きは以下で確認できます。
11. Opacity #1
実装されているのを見かけることも多い、ホバー時にopacityを使って透過させたものです。
実装にはCSSを以下のように記述します。
CSS
figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
opacity: .5;
}実際の動きは以下で確認できます。
12. Opacity #2
先ほどと同様でホバー時にopacityを使って透過させたものなのですが、画像の親要素（今回のサンプルではfigure）に背景色を指定するだけで、少し違った見せ方をすることもできます。
実装にはCSSを以下のように記述します。
CSS
figure {
background: #1abc9c;
}
figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
opacity: .5;
}実際の動きは以下で確認できます。
13. Flashing
当ブログでも使用している、ホバー時に画像が一瞬だけ点滅するようなエフェクトを付けたものです。
実装にはCSSを以下のように記述します。
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;
}
}実際の動きは以下で確認できます。
14. Shine
もっとスマート且つ汎用性高い記述方法ありそうですが、ホバー時にキランと光が左から右へ流れていくようなエフェクトを付けたものです。
実装にはCSSを以下のように記述します。
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%;
}
}実際の動きは以下で確認できます。
15. Circle
GoogleのMaterial Designで用いられているような波紋エフェクトをホバー時に付けたものです。
実装にはCSSを以下のように記述します。
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%;
border-radius: 200%;
opacity: 0;
}
}
@keyframes circle {
0% {
width: 0;
height: 0;
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}実際の動きは以下で確認できます。
以上、CSSのみで実装することができる画像と相性が良さそうなホバーエフェクトでした。
もちろん対応ブラウザにもよりますが、問題ないブラウザであればこのようにCSSだけで手軽にいろいろな見せ方ができるので、写真のギャラリーページなどのように画像が沢山並んでいるようなページで何かエフェクトを付けたい時には非常に便利だと思います。
また、以前当ブログで書いた「CSSのみで実装するキャプションエフェクト 20」と組み合わせて使うのもおすすめで、こちらもCSSのみで簡単に実装することができるので、興味のある方はこちらもご覧になってみてください。
ここで紹介している以外にもCSSで実装できる面白いエフェクトがあれば是非教えてください :)