表現が難しいが、サンプルを見ていただければすぐお分りの通り、タイトル文字列にマウスオーバーすると、円形のサムネイルが360度ワイプされて出現するというもので、サムネイルクリックで写真がフェイドインするタイプのフォトギャラリーである。
例えば、スタッフやメンバーの紹介など、いろいろなページの演出に使えるのではないかと思い作成した。
円形サムネイル写真（border-radius を使って円形にしている）の上に、これまたborder-radiusを使って作成した半円を二つ円形になるようにのせ、サムネイル全体を覆う。マウスオーバーで、この覆いをanimationで連続回転させて取り除き、サムネイル写真全貌を表示させるというものである。
サンプル（DEMO）
※サムネイルクリックで写真が画面上部に移動してしまうのは、原因がよくわかりませんが、このWordpressテーマの制約のためと考えられます。通常のHTMLページでは、移動は起こりません。
こちらのページに、SAMPLEがあります。
本サンプル用に用意した写真
・サムネイル：200px*200px の写真6枚
・表示写真：サムネイルに該当する、600*400px の写真6枚
本サンプル表示用HTML
<div id="stage">
<a href="#p11"><span>×</span></a>
<a href="#pic1"><div class="frame">
<div class="cover"><span>チングルマ</span></div>
<div class="pict">
<img src="img/s1.jpg">
<div class="part1"><div class="arc1"></div></div>
<div class="part2"><div class="arc2"></div></div>
</div>
</div></a>
<a href="#pic2"><div class="frame">
<div class="cover"><span>コマクサ</span></div>
<div class="pict">
<img src="img/s2.jpg">
<div class="part1"><div class="arc1"></div></div>
<div class="part2"><div class="arc2"></div></div>
</div>
</div></a>
<a href="#pic3"><div class="frame">
<div class="cover"><span>イワギキョウ</span></div>
<div class="pict">
<img src="img/s3.jpg">
<div class="part1"><div class="arc1"></div></div>
<div class="part2"><div class="arc2"></div></div>
</div>
</div></a>
<a href="#pic4"><div class="frame">
<div class="cover"><span>ミヤマ<br>キンポウゲ</span></div>
<div class="pict">
<img src="img/s4.jpg">
<div class="part1"><div class="arc1"></div></div>
<div class="part2"><div class="arc2"></div></div>
</div>
</div></a>
<a href="#pic5"><div class="frame">
<div class="cover"><span>コバイ<br>ケイソウ</span></div>
<div class="pict">
<img src="img/s5.jpg">
<div class="part1"><div class="arc1"></div></div>
<div class="part2"><div class="arc2"></div></div>
</div>
</div></a>
<a href="#pic6"><div class="frame">
<div class="cover"><span>ハクサン<br>コザクラ</span></div>
<div class="pict">
<img src="img/s6.jpg">
<div class="part1"><div class="arc1"></div></div>
<div class="part2"><div class="arc2"></div></div>
</div>
</div></a>
<div id="pic1" class="photo"><img src="img/1.jpg"></div>
<div id="pic2" class="photo"><img src="img/2.jpg"></div>
<div id="pic3" class="photo"><img src="img/3.jpg"></div>
<div id="pic4" class="photo"><img src="img/4.jpg"></div>
<div id="pic5" class="photo"><img src="img/5.jpg"></div>
<div id="pic6" class="photo"><img src="img/6.jpg"></div>
</div>
本サンプル表示用CSS
/* 表示枠 */
#stage { max-width:660px;height:415px;background:#000;position:relative; }
/* サムネイル表示枠 */
.frame { position:relative;width:200px;height:200px;margin:5px 0 0 5px;border:none;float:left;}
/* サムネイルの円形表示(淵が表示されないように、小さくし、右下にずらしている) */
.pict img { border-radius:50%;width:197px;height:197px; margin:1px 0 0 1px; }
/* 半円を表示する枠（左右合わせて円形） */
.part1,.part2 {
position:absolute;
width:100px;height:200px;
overflow:hidden;
background:transparent;
}
.part1 {
top:0;left:100px;
}
.part2 {
top:0;left:0px;
}
/* サムネイルの上層に半円(左右合わせて円) */
.arc1,.arc2 {
top:0;left:0;
width:0;height:0;
border-radius: 50%;
border:100px solid transparent;
}
/* border-toとborder-rightを45°時計回りに回転し右半円を作る */
.arc1 {
margin-left:-101px;
border-top:100px solid #000;
border-right:100px solid #000;
transform:rotate(45deg);
animation-fill-mode: forwards;
}
.arc2 {
margin-left:1px;
border-bottom:100px solid #000;
border-left:100px solid #000;
transform:rotate(45deg);
animation-fill-mode: forwards;
}
/* 写真閉じるボタン（✖） */
a span { display:block;position:absolute;top:0;right:0;color:#fff;font-size:32px;font-weight:bold;margin-right:5px; }
a span:hover { cursor:pointer;color:orange; }
/* サムネイル・半円などを覆う透明膜 */
.cover {
position:absolute;top:0;left:0;
width:100%;height:100%;
z-index:100;
}
/* 写真題名 */
.cover span { position:absolute;top:40%;left:25%;color:#fff;font-size:24px;text-align:center; }
.cover:hover { cursor:pointer; }
.cover:hover > span { opacity:0; }
/* coverのマウスオーバーで半円を時計方向に回すanimationを指定 */
.cover:hover ~ .pict .part1 .arc1 { animation:rot1 0.5s linear;animation-fill-mode: forwards; }
.cover:hover ~ .pict .part2 .arc2 { animation:rot2 0.5s linear;animation-fill-mode: forwards; }
/* 表示写真 */
.photo {
opacity:0;
position:absolute;
top:5px;left:5px;
transition:opacity 1s ease;
}
.photo:target {
z-index:200;
opacity:1;
}
/* 各半円のanimation設定 */
@keyframes rot1 {
0% { transform:rotate(45deg); }
50% { transform:rotate(225deg); }
100% { transform:rotate(225deg); }
}
@keyframes rot2 {
0% { transform:rotate(45deg); }
50% { transform:rotate(45deg); }
100% { transform:rotate(224.7deg); }
}