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

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

自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいという時に使えそうなエフェクトのサンプルです。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
  2. Zoom In #2
  3. Zoom Out #1
  4. Zoom Out #2
  5. Slide
  6. Rotate (+Zoom Out)
  7. Blur
  8. Gray Scale
  9. Sepia
  10. Blur + Gray Scale
  11. Opacity #1
  12. Opacity #2
  13. Flashing
  14. Shine
  15. Circle

1. Zoom In #1

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

2. Zoom In #2

同じくホバー時に画像が拡大するようなものですが、こちらはimgwidthを変更することで画像サイズを変更し、先ほどとは違った感じで見せることができます。
実装には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

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

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

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)

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

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

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

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

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

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

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

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

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

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%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

実際の動きは以下で確認できます。

目次へ

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

ここで紹介している以外にもCSSで実装できる面白いエフェクトがあれば是非教えてください :)

Back to Top

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

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

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。