前回の投稿に続き、サムネイル用マウスオーバー効果であるが、マウスオーバーで図上にテキストを表示させるようにしたので、ナビゲーション用にも適用できる。すなわち、拡大画像表示のためのサムネイルにも応用できるし、リンクページジャンプ用のサムネイルにも応用できるものである。
サンプルは、マウスオーバーで出現するスクリーンの出現アニメーション二通りを、アニメーションなしと並べて表示した。
サンプル(DEMO)
槍ヶ岳
2008年㋆末、中房温泉-燕山荘-大天井岳-槍ヶ岳
剣 岳
2011年㋆22日、室堂-別山乗越-剣山壮-剣岳往復
白馬岳
2012年㋆末、栂池高原-白馬大池-白馬岳
本サンプル表示用HTML
<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>
「槍ヶ岳」サンプル表示用CSS
body {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "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;
}
「剣岳」サンプル表示用CSS
body {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "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;
}
「白馬岳」サンプル表示用CSS
body {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "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;
}