自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。
リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。
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を使用しているので、実際の動きや表示は以下デモページで確認できます。
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
同じくホバー時に画像が拡大するようなものですが、こちらは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
「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
こちらは「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
予め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)
ホバー時に画像が回転するエフェクトを付けたもので、更に「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
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
同じく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
こちらも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
上で紹介した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
を使って透過させたものです。
実装にはCSSを下記のように記述します。
figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
opacity: .5;
}
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
ホバー時に画像が一瞬だけ点滅するようなエフェクトを付けたものです。
実装には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
こちらは正直もっとスマート且つ汎用性高い記述方法ありそうですが、ホバー時にキランと光が左から右へ流れていくようなエフェクトを付けたものです。
実装には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
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のみで簡単に実装することができるので、興味ある方は併せてご覧ください。