DARETOKU

<pc>/* ▼PCスマホ用▼ */
/*---------------------
画像全体
---------------------*/
figure {
overflow:hidden;
display:block;
float:left;
width:30%;
margin:0 5% 5% 0;
/* フィルター */
opacity:0.5;
filter: alpha(opacity=50);
}
figure:nth-child(3n) {
margin-right:0;
}

/* 画像 */
figure img {
display:block;
width:100%;
}

/* タイトル */
figcaption {
display:block;
position: absolute;
width:100%;
padding:5px;
font-size:85%;
color: #fff;
opacity: 0;
/* フィルター */
background: rgba(0,0,0,0.5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#88000000, endcolorstr=#88000000, gradienttype=0);
}

/* オンマウス時にフィルターを消す */
figure:hover,
figure:hover figcaption {
opacity: 1;
}
figure:hover { /* IE用 */
filter: alpha(opacity=100);
}
/* アニメーション
※数字が小さいほど早くなる */
figure, figure:hover,
figure:hover figcaption {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}

/*---------------------
タイトルの動きの設定
---------------------*/
/* 上 */
.top figcaption { left: 0; top: -100%; }
.top:hover figcaption { top: 0; }
/* 下 */
.bottom figcaption { left: 0; bottom: -100%;}
.bottom:hover figcaption { bottom: 0px; }
/* 左 */
.left figcaption { bottom: 0; left: -100%; }
.left:hover figcaption { left: 0; }

/* 右 */
.right figcaption { bottom: 0; right: -100%; }
.right:hover figcaption { right: 0; }

</pc>/* ▲PCスマホ用▲ */


/*---------------------
余白
---------------------*/
#album, #category {
margin-top:15px;
}
#img, footer {
margin-bottom:15px;
}

/*---------------------
フッター
---------------------*/
footer,#category {
clear:left;
}