今回は、CSSのみで実装するホバーエフェクト集です
ホバー＝マウスオーバー
（画像の上にマウスポインタが乗った時に動く）
画像にエフェクトをつけたい時に
使ってみて下さい♪

ホームページを作る際のボタンなどに使用してみて下さい

ステップ1

動かしたい画像を用意します


ステップ2

下記のように記述します

#csstest {
	width: 300px;
	height: 200px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}

csstest1 img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
csstest1:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

これだけで、動きます♪
下記デモのホバーエフェクトにしたい場合は、
csstest1部分を変更して下さい。

csstest1

csstest1 img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
csstest1:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

csstest 2

csstest2 img {
	width: 300px;
	height: auto;
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
csstest2:hover img {
	width: 350px;
}

csstest3

csstest3 img {
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
csstest3:hover img {
	-webkit-transform: scale(1);
	transform: scale(1);
}

csstest4

csstest4 img {
	width: 350px;
	height: auto;
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
csstest4:hover img {
	width: 300px;
}

csstest5

csstest5 img {
	margin-left: 250px;
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
csstest5:hover img {
	margin-left: 0;
}

csstest6

csstest6 img {
	-webkit-transform: rotate(15deg) scale(1.4);
	transform: rotate(15deg) scale(1.4);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
csstest6:hover img {
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
}

csstest7

csstest7 img {
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
csstest7:hover img {
	-webkit-filter: blur(0);
	filter: blur(0);
}

csstest8

csstest8 img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
csstest8:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

csstest9

csstest9 img {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
csstest9:hover img {
	-webkit-filter: sepia(0);
	filter: sepia(0);
}

csstest10

csstest10 img {
	-webkit-filter: grayscale(0) blur(0);
	filter: grayscale(0) blur(0);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
csstest10:hover img {
	-webkit-filter: grayscale(100%) blur(3px);
	filter: grayscale(100%) blur(3px);
}

csstest11

csstest11 img {
	opacity: 1;
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
csstest11:hover img {
	opacity: .5;
}

csstest12

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