先日のCSS(CSS3)のみでスライド画像ギャラリーを作る方法に引き続き、
CSS(CSS3)のみで形成する、画像にマウスオーバーで拡大エフェクトをつける
ギャラリー的なもののサンプルを紹介してみます。

初めに完成サンプルから。
※動作環境は前回同様にWebkitブラウザのSafariやChromeのみです。

CSS3 HOVER SPREAD GALLERY【SAMPLE01】

サムネイル画像にマウスオーバーすると画像がスムーズに拡大します。
拡大後は画像に対してCSS3ドロップシャドウが付きます。

今回のHTMLソースは<ul>と<li>のリストで形成された
ごく単純なもの。

◆HTML
<div id="contents">
<ul>
<li><a href="#"><img src="img/photo01.jpg" width="200" height="150" alt=""></a></li>
<li><a href="#"><img src="img/photo02.jpg" width="200" height="150" alt=""></a></li>
<li><a href="#"><img src="img/photo03.jpg" width="200" height="150" alt=""></a></li>
<li><a href="#"><img src="img/photo04.jpg" width="200" height="150" alt=""></a></li>
</ul>
</div><!--/#contents-->

リストの中にそれぞれ画像を4枚張っています。

これらの画像に対してCSSでマウスオーバー「:hover」で
アニメーション動作を付けます。

◆CSS
/* ContentsArea
-------------------------- */
#contents {
	margin: 0 auto;
	width: 450px;
	text-align: left;
	position: relative;
}

#contents ul {
	width: 450px;
}

#contents ul li {
	margin: 10px 10px;
	width: 200px;
	height: 150px;
	text-align: center;
	float: left;
	display: inline;
}

#contents ul li img {
	-webkit-transform:scale(1);
	position: absolute;
	opacity: 0.7;
	z-index: 10;
}


/* ClearFixElements
-------------------------- */
#contents ul:after {
	content: "";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}


/* CSS3 HoverAnimation
-------------------------- */
@-webkit-keyframes hoverSpread {
	0% {-webkit-transform:scale(1);opacity: 0.7;}
	100% {-webkit-transform:scale(1.5);opacity: 1;}
}

#contents ul li img:hover {
	-webkit-animation-name: hoverSpread;
	-webkit-animation-duration: 0.7s;
	-webkit-animation-iteration-count: 1;

	-webkit-transform: scale(1.5);
	-webkit-box-shadow: 0 0 10px #000;
	opacity: 1;
	z-index: 20;
}

最後の「CSS3 HoverAnimation」の部分で画像にマウスオーバーした際に
CSS3の「transform」プロパティを使って画像全体を拡大しています。

全体の構成これだけで、記述もたいして難しくなることなく
CSS3のみで拡大エフェクトをかけることができます。

このサンプルのエフェクトをもうちょっと遊んでみたパターンは次へ。

CSS3 HOVER SPREAD GALLERY【SAMPLE02】

CSS3の「rotateX」を使って、
マウスオーバーで画像を回転させながら拡大します。

このアクションについては上記【SAMPLE01】のHTMLと基礎部分のCSSは同じで
CSS3アニメーション部分のみ以下のように変更してあります。

◆CSS
/* CSS3 HoverAnimation
-------------------------- */
@-webkit-keyframes hoverSpread {
	0% {-webkit-transform:scale(1) rotateX(0);-webkit-box-shadow: 0 0 0 #000;opacity: 0.7;}
	40% {-webkit-transform:scale(1.2) rotateX(180deg);-webkit-box-shadow: 0 0 0 #000;opacity: 0.7;}
	80% {-webkit-transform:scale(1.5) rotateX(0);-webkit-box-shadow: 0 0 10px #000;opacity: 0.7;}
	100% {-webkit-transform:scale(1.5) rotateX(0);-webkit-box-shadow: 0 0 10px #000;opacity: 1;}
}

#contents ul li img:hover {
	-webkit-animation-name: hoverSpread;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;

	-webkit-transform: scale(1.5) rotateX(0);
	-webkit-box-shadow: 0 0 10px #000;
	opacity: 1;
	z-index: 20;
}

ちょっとアニメーションがチラついてしまったり、
マウスオーバーのポイントが外れてしまったりすることがありますが…

jQuery無しでもこういった単純なエフェクトは
CSS3だけでも実装がさほど難しくなく組み込めます。

CSSのみで拡大アニメーションエフェクトが必要になった際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (3)

  • 山田 裕子 | 2013.04.25 14:31

    この猫ちゃんの画像は、四角ですが、
    http://black-flag.net/css/20101209-2155.html
    ある画像内に丸い画像がある場合、その丸画像をマウスオンした時に丸のみが拡大する方法を捜しています。

    全体の画像の入替でなく、画像内の丸のみを拡大する方法がありましたら、教えていただけますでしょうか?

    よろしくお願いいたします。

  • BlackFlag | 2013.04.27 23:22

    >山田裕子さん
    コメントありがとうございます。

    ご質問いただきました件についてですが
    思いつく方法としては
    拡大させる丸のみの画像と、拡大させない部分の画像を分けて用意し
    2枚の画像を重ね合わせる構成にして
    マウスオンで丸のみの画像を拡大させる方法になるのではないかと感じております。

    お試しください。
    よろしくお願いします。

  • すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ | コムテブログ | 2014.04.21 8:34

    [...] CSS(CSS3)のみでマウスオーバーで画像拡大エフェクトを付ける方法 | BlackFlag [...]







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

CSS(CSS3)のみでマウスオーバーで画像拡大エフェクトを付ける方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR