responsive 全画面表示 - webかたつむり

仕上がりの目標。
hoverすると、べた色が下から出てきて、文字の位置がセンターにくる。
後ろのレイヤ―、<div id="photo">の「background」に画像をレイアウトする。
手前のレイヤー、<div id="caption">の「background」に色ベタをレイアウトする。
#photo、の中に（入れ子で）#captionを配置する。

VHとは？

opacity

要素全体の不透明度。背景も、文字も透過になる。

rgba

rgbaで設定できるのは、backgroundの不透明度のみ。
16進数をrgbに変換する。#e20613→16*14+2, 6, 16+3→226, 6,19

.caption{
background: rgba(226, 6, 19, 0.5);
width: 100%;
height: 100%;
}

.caption（=上にあるキャプションレイヤー）にrgbaで背景を指定する。
<div class="caption">の背景色だけ不透明になる。結果として下にある<div class="photo">が少しだけ見えている。
<div class="caption">の親要素、<div class="photo">に対して、幅と高さを100%に指定しておく。

hoverする前は、写真がきちんと見えているのだから、rgbaの a=0。
captionを見せたい位置にくるように、尚且つボタンが隠れるように、<div class="caption">のpadding-topを調節する。
padding-topを使って、.captionの縦の長さを長くする。色べたの長さを長くする。さらに、最初は見せたくないボタンを隠すところがコツ。
padding-topの分だけ、高さが伸びる。その分だけpositionで上げることができる。
padding-topの分量＝position topの移動幅の最大値。
（おまけ）文字が見にくいので、text-shadowを使う。

今後の方針。まずposition absoluteを使って、最初の位置を規定する。
親要素の.photoにはposition relative。
hoverした時は、position topの値を「-（マイナス）」にして.captionの位置を上にあげる。移動できる最大量はpadding-bottomの値。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>vougue responsive</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<div class="logo">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 160 160" enable-background="new 0 0 160 160" xml:space="preserve">

<g id="background">
<rect fill="#FFFFFF" width="160" height="160"/>
</g>
<g id="frame">
<path id="line" fill="#CCBB8E" d="M5,5h149.999v149.999H5V5z M0,160h160V0H0V160z"/>
</g>
<g id="text">
<path class="char" d="M102.678,139.061c2.12,0,2.12-0.548,2.12-5.404c0-0.412-0.138-4.857-0.205-5.268c-0.136-1.163-0.411-1.849-0.411-2.326

中略

c-0.342-0.958-1.368-0.958-1.915-0.958H56.385z"/>
</g>
</svg>
</div>

<div class="upper">
<div class="ph01 photo">
<div class="caption">
<h2>#01</h2>
<p class="text">photo caption #01</p>
<p class="more"><a href="#">more storys</a></p>
</div>
</div>

<div class="ph02 photo">
<div class="caption">
<h2>#02</h2>
<p class="text">photo caption #02</p>
<p class="more"><a href="#">more storys</a></p>
</div>
</div>

</div>

<div class="bottom">

<div class="ph03 photo">
<div class="caption">
<h2>#03</h2>
<p class="text">photo caption #03</p>
<p class="more"><a href="#">more storys</a></p>
</div>
</div>

<div class="ph04 photo">
<div class="caption">
<h2>#04</h2>
<p class="text">photo caption #04</p>
<p class="more"><a href="#">more storys</a></p>
</div>
</div>

<div class="ph05 photo">
<div class="caption">
<h2>#05</h2>
<p class="text">photo caption #05</p>
<p class="more"><a href="#">more storys</a></p>
</div>
</div>

</div>
<footer>copyright Hiroyuki FURUHASHI all rights reserved</footer>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
html, body, div, img, h1, h2, p, a{
margin: 0;
padding: 0;
line-height: 1.0;
font-family: Helvetica, sans-serif;
}
img{vertical-align: bottom:}
a{text-decoration: none;}
/*reset
-----------------------------------------------------------------*/
#container{
width: 100%;
position: relative;
}
.ph01{background: url(img/01.jpg) no-repeat ;}
.ph02{background: url(img/02.jpg) no-repeat ;}
.ph03{background: url(img/03.jpg) no-repeat ;}
.ph04{background: url(img/04.jpg) no-repeat ;}
.ph05{background: url(img/05.jpg) no-repeat ;}

.upper, .bottom{
overflow: hidden;
}
.photo{
float: left;
max-width: 100%;
background-size: cover;
text-align: center;
position: relative;/*子要素.captionのabsoluteを設定するため。*/
}
.upper .photo{
width: 50%;
height:50vh;
}
.bottom .photo{
width: 33.33%;
height: 50vh;
}
/*layout for images
------------------------------------------------------------------*/
h2, p{
color: #fcfcfc;
text-shadow: 0px 0px 4px #333333;
line-height: 40px;
}
h2{font-size: 32px;}
p{font-size: 20px;}
p a{
color: white;
line-height: 50px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
p.text{
padding-bottom: 6%;
}
/*layout for texts
----------------------------------------------------------------*/
.caption{
background: rgba(205, 187, 143, 0);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: ease 0.3s;
}
.upper .caption{
padding-top: 35%;
}
.bottom .caption{
padding-top:55%;
}
.caption:hover{
background: rgba(205, 187, 143, 0.5);
}
.upper .caption:hover{
top: -25%;
}
.bottom .caption:hover{
top: -25%;
}
footer{
height: 150px;
background: #ccbb8e;
text-align: center;
line-height: 150px;
font-size: 16px;
font-family:Arial, Helvetica, sans-serif;
color: #000080;
}
/*animation
------------------------------------------------------------------------------------*/
.logo{
width: 160px;
height: 160px;
position: absolute;
top:42%;
left:50%;
margin: -80px 0 0 -80px;
z-index: 100;
}
path.char{
stroke:#e20613;
stroke-width: 1;
fill:#ffffff;
stroke-dasharray: 3000;/*破線の間隔*/
stroke-dashoffset: 3000;
animation:DASH 6s ease-in-out 1s forwards;
}/*animation name=DASH duration delayの順番*/
@keyframes DASH{
0%{stroke-dashoffset: 3000; fill:#fff;}
85%{stroke-dashoffset: 0; fill:#dd010e;}
100%{stroke-dashoffset: 0; fill:#e20613;}
}