縦横6ピクセルの小さなアニメgifとcssを使って、hover時に、画像編集ソフトの選択範囲のような動く破線をつけます。 サンプルは画像とテキストの2種類です。 アニメgif ←このアニメgifを画像とテキストを入れるboxの背景に敷き詰めます。アニメgifは全体に斜線が移動しますが、サンプル1の場合は画像がマスクになって、破線が動いているように見えます。同様にサンプル2のテキストの場合も途中に挟んだdivの背景に色を付けてマスクしています。 サンプル3は、サンプル2と同じものですが、背景のアニメgifのみを変更して、破線の移動する方向を右下にしています。

サンプル1(画像)

sample01

サンプル1・CSSソース

a.box { 
	display: block; width: 202px; height: 202px; margin: 0 auto; text-align: center; 
	border: 1px solid #eee;
	} 
a.box img {
	padding: 1px;border: 0;
	} 
a.box:hover  {
	opacity:0.7; filter:alpha(opacity=70); -ms-filter: “alpha( opacity=70 )”; 
	padding: 1px;border: 0; 
	background: #fff url(images/anime-dot.gif) repeat left top;
	}

 

サンプル2

サンプル3

サンプル2・CSSソース

a.box2 {
	display: block;width: 202px; height: 52px;margin: 0 auto;
	text-align: center;border: 1px solid #777;text-decoration: none;
	}
a.box2 div {
	width: 200px; height: 50px; margin: 1px auto; background: #efefef;
	}
a.box2 div span {
	display: block;padding: 15px 0 0 0; font-weight:bold;
	font-size:15px; color:#000;
	}
a.box2:hover {
	opacity: 0.7; filter: alpha(opacity=70); -ms-filter: “alpha( opacity=70 )”; 
	padding: 1px; border: 0; 
	background: #fff url(images/anime-dot.gif) repeat left top;
	}
戻るボタン