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部分を変更して下さい。
1

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で透明度設定