イメージ（画像）のホバー時に使う様々な動きのあるエフェクトメモ2つ

2012.04.22 Category:CSS Tag:summary

あまり派手なモノはありませんが、よく見かけるものばかりを2つピックアップしました。

イメージを拡大させる

CSS3を使って、ホバー時にイメージが拡大させます。 transform:scaleプロパティを使います。

↓　出来上がりはこのような感じになります。

対応ブラウザ Google Chrome / Safari 5+/ Firefox 3+/ Opera 11+/ InternetExplorer 9+

DEMO

<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>

</div>

.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;
}

.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+

DEMO

ヘッダー部分に

<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>