あまり派手なモノはありませんが、よく見かけるものばかりを2つピックアップしました。
イメージを拡大させる
CSS3を使って、ホバー時にイメージが拡大させます。 transform:scaleプロパティを使います。
↓ 出来上がりはこのような感じになります。
対応ブラウザ
Google Chrome / Safari 5+/ Firefox 3+/ Opera 11+/ InternetExplorer 9+
|
<div class="css3gallery"> <img src="image.jpg" alt="image gallery" title="image gallery" /> <img src="image2.jpg" alt="image gallery" title="image gallery" /> <img src="image.jpg" alt="image gallery" title="image gallery" /> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
|
.gallery img{ /* デフォルトサイズ */ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); /* アニメーション */ -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; /* opacity */ opacity: 0.7; margin: 0 10px 5px 0; } .gallery img:hover{ /* ホバーした時のサイズ */ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); /* box-shadow */ box-shadow:0px 0px 30px gray; -webkit-box-shadow:0px 0px 30px gray; -moz-box-shadow:0px 0px 30px gray; /* opacity */ opacity: 1; } |
画像にフェードをかける
これもよく見かけると思います。 jQueryを使って、ホバー時にフェード(霧がかかった様になる)します。
↓ 出来上がりはこのような感じになります。
右下の画像に霧がかかった様に、白っぽくなっていると思います。
対応ブラウザ
Google Chrome / Safari 5+/ Firefox 3+/ Opera 11+/ InternetExplorer 9+
ヘッダー部分に
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ /* 1つ目 */ $('.selectorClass').hover( function(){ $(this).stop().fadeTo('slow',0.4);//スピードと透過度 }, function(){ $(this).stop().fadeTo('slow',1); }); /* 2つ目 */ $('.selectorClass2').mouseenter(function(){ $(this).stop().fadeTo('slow',0.4); }).mouseleave(function(){ $(this).stop().fadeTo('slow',1); }); /* 3つ目 */ $('.selectorClass3').hover(function(){ this.check = this.check || 1; $(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4); }); }); </script> |