cssコピペで簡単!マウスオンで画像をアニメーション

アニメーション_css

マウスオンで画像を
自由自在にアニメーション!

システムエンジニア(SE)かっきーです。

画像にマウスを合わせたとき画像がズームしたり、動いたりするのを見かけませんか。

こんな感じのやつです。

ライティングレシピ_文章力_向上_文章_書き方_キュレーター_ブロガー_クラウドワークス_コンテンツSEO_ライティング_ライター

実は簡単に実装できてしまいます!

ズームイン

拡大率を変更したい時は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);
}


ズームアウト

最初に紹介したズームインの逆バージョンです。
ホバー時には画像が元の大きさに戻ります。

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);
}

ぼかし

ホバー時にぼかしを入れるようにしています。

ぼかしを調整したい場合はソースの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);
}

セピア効果

レトロ風に仕上がりますよ。

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);
}

波効果

ライティングレシピ_文章力_向上_文章_書き方_キュレーター_ブロガー_クラウドワークス_コンテンツSEO_ライティング_ライター

他のサイトとは違ったものがいいという方にはとてもオススメです。

ホバー時に波を打ったかのようになります。

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;
	}
}

こちらのサイトからサンプルを15個確認することが出来ます。

( icon-star 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です