マウスホバーするとボーダーがアニメーションで太くなるサムネイルの作り方

2016.06.07 コーディング

サムネイル画像にマウスを合わせたとき、それがリンクになっていることをユーザーに分かってもらう必要があります。

CSSによって透明度を変えるのがもっとも一般的かと思いますが、今回は画像をボーダーで囲み、マウスホバーするとボーダーがアニメーションでにゅっと太くなるサムネイルの作り方をご紹介します。

デモページはこちら

まずは仕組みから

仕組みは至ってシンプルです。

position:relative;を指定した親要素の中に、絶対配置(position:absolute;)で画像を入れたブロック要素とdisplay:block;でブロック要素化したa要素を重ねます。

HTMLソース内で画像のブロック要素の後にa要素を記述すれば、特にスタイル指定しなくてもa要素が上に重なります。

CSSでは通常時(マウスホバーしていない状態)のスタイルを指定しておきます。

これにjQueryでマウスホバー時のボーダーのアニメーションを設定していきます。

マウスホバーするとボーダーがアニメーションで太くなるサムネイルの作り方

サンプルコード

HTML

<div class="thumb">
<div class="thumb_img"><img src="images/pic_02.jpg" alt="Thumb" title="" width="600" height="400" /></div>
<div class="thumb_frame"><a href="#" title="">more</a></div>
</div><!-- .thumb -->

親要素「thumb」の中に子要素「thumb_img」「thumb_frame」を入れます。
「thumb_img」にはサムネイル画像を、「thumb_frame」にはリンク要素を入れておきます。

CSS

.thumb {
	width:600px;
	height: 400px;
	position: relative;
}
.thumb_img {
	width: 600px;
	height: 400px;
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
}
.thumb_frame a {
	width: 600px;
	height: 400px;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	border: 10px solid rgba(255,255,255,0.4);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-indent: -9999px;
}

「thumb」にposition: relative;を指定、画像のサイズに合わせてwidth、heightも指定しておきます。

「thumb_img」は画像サイズに合わせてwidth、heightを指定した上でposition: absolute;を指定。

top: 0px;、left: 0px;で「thumb」にピッタリ合わせておきます。

さらに「thumb_frame」内のa要素をdisplay: block;でブロック要素化し、これもposition: absolute;とtop: 0px;、left: 0px;で「thumb」「thumb_img」の上にピッタリ重ねます。

半透明のボーダー(ここでは10px)を指定し、box-sizing: border-box;を指定しておきます。

アニメーションでボーダーが太くなったとき、画像の領域の内側へ向かって太くしたいので、box-sizing: border-box;は必ず指定してください。

これで見た目はサムネイル画像を半透明のボーダーが囲んでいる形になりました。

今回は画像を「thumb_img」というブロック要素の中に入れていますが、画像をdisplay: block;でブロック要素化しても大丈夫です。

しかし「thumb_img」にoverflow: hidden;を指定して画像を中に入れておく形にすれば、画像のサイズがサムネイルのサイズ(この場合width: 600px;、height: 400px;)より大きい場合ははみ出た部分は隠れてくれるのでおすすめです。

また親要素「thumb」にはposition:relative;だけでなく、position: absolute;やposition:fixed;を指定しても大丈夫です。

画像とボーダーを重ねる際にtop、bottom、left、rightなどで位置を指定するわけですが、初期設定(position:static)だとこれらが利用できないため、position:relative;、position: absolute;、position:fixed;のいずれかを指定しておく必要があります。

そのため、デザイン上position: absolute;、position:fixed;などで絶対配置する必要がない場合には、position:relative;を指定しておいてください。

jQuery

$(function(){

	$('.thumb')
	.on('mouseover', function(){
		$(this).find('.thumb_frame a')
		.stop(true)
		.animate({ borderWidth: '20px' }, 200, '');
	})
	.on('mouseout', function(){
		$(this).find('.thumb_frame a')
		.stop(true)
		.animate({ borderWidth: '10px' }, 200, '');
	});

});

最後に、jQueryによるアニメーションの設定です。

「thumb_frame」内のa要素にマウスホバーされたときに、ボーダーを0.2秒かけて20pxの太さまでアニメーションさせています(1秒が1000です)。

そしてサムネイルからマウスがはずれたら、同じように0.2秒かけて元の太さ(10px)に戻ります。

stop(true)はアニメーションを中断するための設定です。

これがないとマウスホバーして素早くマウスをはずしても、アニメーションが中断されることなく実行されてしまいます。

マウスホバーしてすぐにマウスをはずしたら、アニメーションが途中であっても元の太さに戻る方が動作としては自然だと思いますので、是非設定しておいてください。