川口・さいたまのホームページ製作 川口・さいたまのホームページ制作会社関東ダイイチへ問い合わせる 埼玉県川口市のホームページ制作会社関東ダイイチへ電話する さいたま・川口のホームページ制作会社関東ダイイチへメールする



CSSのみのホバーエフェクト|さいたま・川口の低価格なホームページ制作会社
TOPダイイチウェブニュース>CSSのみのホバーエフェクト

CSSのみのホバーエフェクト

拡大させる|さいたま・川口の看板屋


今回は、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;
	}
}

以上、12種類のホバーエフェクト集でした
とても簡単にできるのでWEBデザインの際にはぜひ試して見てください!

関連ニュース
CSS3リファレンス.1
CSS3リファレンス.2
CSS3リファレンス.3
CSSでアニメーション
CSSで出来るブレンドモード
CSSで透明度設定




ホームページ制作の料金|川口WEB会社HP制作の製作実績|川口のホームページ制作会社HP制作会社の関東ダイイチ|会社案内ウェブ制作のさいたま|関東ダイイチ|問い合わせ
Copyright © 2014 web no daiichi All Rights Reserved.  
>TOP >ホームページの必要性 >料金
>ご注文から公開まで >お問い合わせ >制作実績
>会社案内 >ダイイチニュース  >リンク
ホームページ制作|埼玉県川口市西川口2-10-1
川口・さいたまのWEB制作