サムネイル用ロールオーバー効果（２）

　前回の投稿に続き、サムネイル用マウスオーバー効果であるが、マウスオーバーで図上にテキストを表示させるようにしたので、ナビゲーション用にも適用できる。すなわち、拡大画像表示のためのサムネイルにも応用できるし、リンクページジャンプ用のサムネイルにも応用できるものである。
　サンプルは、マウスオーバーで出現するスクリーンの出現アニメーション二通りを、アニメーションなしと並べて表示した。

サンプル(DEMO)

本サンプル表示用ＨＴＭＬ

<a href="#">
<div class="frame"><img src="images/yari.jpg" />
  <div class="screen"></div>
  <span class="title">槍ヶ岳</span>
  <span class="note">2008年?末、中房温泉－燕山荘－大天井岳－槍ヶ岳</span>
</div></a>
<a href="#">
<div class="frame"><img src="images/turugi.jpg" />
  <div class="screen2"></div>
  <span class="title">剣　岳</span>
  <span class="note">2011年?22日、室堂－別山乗越－剣山壮－剣岳往復</span>
</div></a>
<a href="#">
<div class="frame"><img src="images/sirouma.jpg" />
  <div class="screen3"></div>
  <span class="title3">白馬岳</span>
  <span class="note3">2012年?末、栂池高原－白馬大池－白馬岳</span>
</div></a>

「槍ヶ岳」サンプル表示用ＣＳＳ

body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a {
	text-decoration:none;
}
.frame {
	position:relative;
	float:left;
}
.frame img {
	border:0;
}
.frame:hover > .screen {
	background-color:rgba(204,51,51,0.5);
	box-shadow: 0 0 0 5px #930 inset;
}
.frame:hover > .title {
	display:block;
}
.frame:hover > .note {
	display:block;
}
.title {
	position:absolute;
	top:15px;left:20px;
	color:#FFF;
	font-weight:bold;
	font-size:24px;
	display:none;
}
.note {
	position:absolute;
	top:150px;left:10px;
	color:#FFF;
	font-size:12px;
	display:none;
}
.screen {
	background-color:rgba(204,51,51,0);
	position:absolute;
	top:0;left:0;
	width:200px;
	height:200px;
}

「剣岳」サンプル表示用ＣＳＳ

body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a {
	text-decoration:none;
}
.frame {
	position:relative;
	float:left;
}
.frame img {
	border:0;
}
.frame:hover > .screen {
	background-color:rgba(204,51,51,0.5);
	box-shadow: 0 0 0 5px #930 inset;
}
.frame:hover > .title {
	display:block;
}
.frame:hover > .note {
	display:block;
}
.title {
	position:absolute;
	top:15px;left:20px;
	color:#FFF;
	font-weight:bold;
	font-size:24px;
	display:none;
}
.note {
	position:absolute;
	top:150px;left:10px;
	color:#FFF;
	font-size:12px;
	display:none;
}
.screen {
	background-color:rgba(204,51,51,0);
	position:absolute;
	top:0;left:0;
	width:200px;
	height:200px;
	transition:all ease-in 0.3s;
	-webkit-transition:all ease-in 0.3s;
}

「白馬岳」サンプル表示用ＣＳＳ

body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a {
	text-decoration:none;
}
.frame {
	position:relative;
	float:left;
}
.frame img {
	border:0;
}
.frame:hover > .screen {
	top:0;left:0;
	width:200px;height:200px;
	background-color:rgba(204,51,51,0.4);
	box-shadow: 0 0 0 5px #930 inset;
}
.frame:hover > .title {
	opacity:1;
}
.frame:hover > .note {
	opacity:1;
}
.title {
	position:absolute;
	top:15px;left:20px;
	color:#FFF;
	font-weight:bold;
	font-size:24px;
	opacity:0;
	transition:all ease-in 0.3s;
	-webkit-transition:all ease-in 0.3s;
}
.note {
	position:absolute;
	top:150px;left:10px;
	color:#FFF;
	font-size:12px;
	opacity:0;
	transition:all ease-in 0.3s;
	-webkit-transition:all ease-in 0.3s;
}
.screen {
	position:absolute;
	top:100px;left:100px;
	width:0;height:0;
	background-color:rgba(204,51,51,0);
	transition:all ease-in 0.3s;
	-webkit-transition:all ease-in 0.3s;
}