CSS・CSS3

CSS3を利用してマウスオーバーで画像を拡大や変化させる +α

css3-img-hover

今回は、CSS3を利用してマウスオーバー時に画像にエフェクトなどを付けるコードのご紹介です。
CSSでマウスオーバー時のエフェクトで多いのが、透過(opacity)が多いのではないでしょうか?
コードも一行で実装も簡単なんで、僕も透過(opacity)は、多用しているんですけどね。
で、透過(opacity)でもいいと思うのですが、やはりマウスオーバー時のユニークさも出したい時なんかに今回のエフェクト(画像拡大/ブラーなど)は利用できるんじゃないかなーと思います。

デモサイトもありますので下記をリンク先をご覧ください。(モダンブラウザでご覧ください。)

デモサイト

下記のHTMLとCSSは、デモサイトを例として記載しております。

マウスオーバー時に画像を拡大

マウスオーバーに画像を拡大させます。
transitionを利用してアニメーション化させています。

HTML

<li class="demo-1"><img src="img/1.jpg"></li>

CSS

.content ul li{
	float:left;
	overflow:hidden;
	width:300px;
	height:300px;
	border:5px solid #000;
	margin-top:35px;
	margin-left:55px;
	cursor:pointer;
	}
.demo-1 img{
	width:300px;
	height:300px;
  	-webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;	
	}
.demo-1 img:hover{
	width:400px;
	height:400px;	
	}

デモサイト

マウスオーバー時に角度を変更

マウスオーバーに画像の角度を変更します。
:hover時に【transform: rotate】で、画像にアニメーションしながら角度を加えています。

HTML

<li class="demo-3"><img src="img/3.jpg"></li>

CSS

.content ul li{
	float:left;
	overflow:hidden;
	width:300px;
	height:300px;
	border:5px solid #000;
	margin-top:35px;
	margin-left:55px;
	cursor:pointer;
	}
.demo-3 img{
	width:300px;
	height:300px;
  	-webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;	
	}
.demo-3 img:hover{
	width:400px;
	height:400px;	
	-webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg);
	}

デモサイト

マウスオーバー時に画像を横方向にスライド

HTML

<li class="demo-4"><img src="img/4.jpg"></li>

CSS

.content ul li{
	float:left;
	overflow:hidden;
	width:300px;
	height:300px;
	border:5px solid #000;
	margin-top:35px;
	margin-left:55px;
	cursor:pointer;
	}
.demo-4 img{
	margin-left:0;
  	-webkit-transition: margin 1s ease;
        -moz-transition: margin 1s ease;
        -o-transition: margin 1s ease;
        -ms-transition: margin 1s ease;
        transition: margin 1s ease;	
	}
.demo-4 img:hover{
	margin-left:-200px;
	}

デモサイト

マウスオーバー時に画像にブラー効果を解除

こちらのブラー効果は、IEには非対応となっています。

HTML

<li class="demo-5"><img src="img/5.jpg"></li>

CSS

.content ul li{
	float:left;
	overflow:hidden;
	width:300px;
	height:300px;
	border:5px solid #000;
	margin-top:35px;
	margin-left:55px;
	cursor:pointer;
	}
.demo-5 img{
	filter: blur(5px);
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
  	-webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;	
	}
.demo-5 img:hover{
	filter: blur(0);
	-webkit-filter: blur(0);
	-moz-filter: blur(0);
	-o-filter: blur(0);
	-ms-filter: blur(0);
	}

デモサイト

マウスオーバー時に画像を拡大してグレースケール効果を解除

こちらも、グレースケールは、IEには非対応となります。

HTML

<li class="demo-2"><img src="img/2.jpg"></li>

CSS

.content ul li{
	float:left;
	overflow:hidden;
	width:300px;
	height:300px;
	border:5px solid #000;
	margin-top:35px;
	margin-left:55px;
	cursor:pointer;
	}
.demo-2 img{
	width:300px;
	height:300px;
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
	-ms-filter: grayscale(1);
  	-webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;	
	}
.demo-2 img:hover{
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	-o-filter: grayscale(0);
	-ms-filter: grayscale(0);
	width:400px;
	height:400px;
	}

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

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

PREVIOUS slicknav

スマホのドロップダウンメニューの実装に使える【SlickNav】使い方

NEXT typed-js

テキストをタイピングエフェクト風に出来るjQueryプラグインTyped.js使い方