先日の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-->
リストの中にそれぞれ画像を４枚張っています。
これらの画像に対して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のみで拡大アニメーションエフェクトが必要になった際に是非。。。