Warning: Invalid argument supplied for foreach() in /home/yoisina/css.programming.jp/public_html/wp-content/plugins/amp/includes/sanitizers/class-amp-img-sanitizer.php on line 61

Warning: Invalid argument supplied for foreach() in /home/yoisina/css.programming.jp/public_html/wp-content/plugins/amp/includes/sanitizers/class-amp-img-sanitizer.php on line 61

Warning: Invalid argument supplied for foreach() in /home/yoisina/css.programming.jp/public_html/wp-content/plugins/amp/includes/sanitizers/class-amp-img-sanitizer.php on line 61
サムネイル用ロールオーバー効果(2) – css だけで作る スライドショー・フォトギャラリー
css だけで作る スライドショー・フォトギャラリー

サムネイル用ロールオーバー効果(2)

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

サンプル(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;
}