CSS だけでおしゃれなウェブアルバムを作る

JavaScript 不要CSS だけでおしゃれなウェブアルバムを作ります。

画像サイズがバラバラの場合はそれぞれに合った CSS を記述しなくてはならないので、サイズを揃えるのが望ましいです。

実際の表示

デモページ

コード

HTML

<div id="thumbnail">
<ul>
<li><a href="#disp-1"><img src="/cmp/parts/web-album/pic1-150s.jpg"></a></li>
<li><a href="#disp-2"><img src="/cmp/parts/web-album/pic2-150s.jpg"></a></li>
<li><a href="#disp-3"><img src="/cmp/parts/web-album/pic3-150s.jpg"></a></li>
<li><a href="#disp-4"><img src="/cmp/parts/web-album/pic4-150s.jpg"></a></li>
<li><a href="#disp-5"><img src="/cmp/parts/web-album/pic5-150s.jpg"></a></li>
<li><a href="#disp-6"><img src="/cmp/parts/web-album/pic6-150s.jpg"></a></li>
<li><a href="#disp-7"><img src="/cmp/parts/web-album/pic7-150s.jpg"></a></li>
<li><a href="#disp-8"><img src="/cmp/parts/web-album/pic8-150s.jpg"></a></li>
<li><a href="#disp-9"><img src="/cmp/parts/web-album/pic9-150s.jpg"></a></li>
</ul>
</div>
<div id="display">
<div id="disp-1"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic1-300s.jpg"></div></a></div>
<div id="disp-2"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic2-300s.jpg"></div></a></div>
<div id="disp-3"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic3-300s.jpg"></div></a></div>
<div id="disp-4"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic4-300s.jpg"></div></a></div>
<div id="disp-5"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic5-300s.jpg"></div></a></div>
<div id="disp-6"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic6-300s.jpg"></div></a></div>
<div id="disp-7"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic7-300s.jpg"></div></a></div>
<div id="disp-8"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic8-300s.jpg"></div></a></div>
<div id="disp-9"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic9-300s.jpg"></div></a></div>
</div>
<div id="anchor"></div>

CSS

#thumbnail {
width:  100%;
height: 100%;
margin:  0;
padding: 0;
background-color: #fff;
}
#thumbnail ul {
margin: 30px 0 0 30px;
padding: 0;
list-style: none;
}
#thumbnail ul::before {
content: "";
display: block;
width: 100%;
height: 0;
line-height: 0;
margin-bottom: -30px;
}
#thumbnail ul::after {
clear: both;
content: "";
display: block;
line-height: 0;
}
#thumbnail li {
float: left;
margin-top: 30px;
}
#thumbnail li + li {
margin-left: 30px;
}
#thumbnail li:nth-child(4),
#thumbnail li:nth-child(7) {
clear: left;
margin-left: 0;
}
#thumbnail img {
width: 80%;
transition: all .1s
}
#thumbnail img:hover {
width: 100%;
margin: -10%;
transition: all .2s;
}
#display > div {
position: fixed;
z-index: -1;
top:  0;
left: 0;
width:  100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
opacity: 0;
transition: all .2s;
}
#display > div:target {
z-index: 1;
opacity: 1;
transition: all .4s;
}
#display a {
display: block;
width:  100%;
height: 100%;
cursor: default;
}
#display .close {
position: absolute;
top:  50%;
left: 50%;
margin-top:  -150px;
margin-left: -150px;
}
#display .close::after {
content: "✕ 閉じる";
display: inline-block;
position: absolute;
top: 0;
left: 100%;
padding: 5px;
color: #fff;
font-weight: bold;
word-break: keep-all;
white-space: nowrap;
background-color: rgba(0, 0, 0, .2);
cursor: pointer;
}
#anchor {
position: fixed;
width: 0;
height: 0;
line-height: 0;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です