背景画像を使ったフルードグリッド

画像を可変（フルード）にするには、２種類のやり方があります。

imgタグで表示している画像にはフルードイメージの設定

img {
  max-width: 100%;
}

background-imageの場合、少し注意が必要です。imgの場合、img自身が幅や高さを持っているので、敢えて幅・高さを確保する必要はありませんが、背景画像の場合は背景画像を表示させる領域を確保する必要があります。固定値であれば、PXで指定するだけですが、フルードにしたい場合は値を%にしないといけません。幅に関しては%指定で問題ないですが、高さを%にすると色々と問題が出て来てしまいます。
そこで、高さに関しては%指定せずに代わりにpadding
で画像の表示領域を確保する方法をとります。
paddingはtopだろうがleftだろうがbottomだろうが、その要素の幅を基準とするので、その要素の横幅に対して画像の高さが何pxかを％に変換するだけです。
さらにbackground-size: の指定を忘れずにしましょう。

例
背景画像を表示したい領域が960px　✖　420pxの場合、

固定値での設定

header {
  width: 960px;
  height:420px;
  background: url(img/mainvis_146.png) no-repeat;
}

フルード化

header {
  width: 100%;
  height:0;
  padding-bottom:43.75% ; /*420px÷960px=43.75*/
  background-size: cover;
}

画像をホバーしたらキャプションが出る

css3のtranstionを使って、画像をホバーしたらキャプションが出る設定にしてみましょう。

<li class="size-2x2">
<img src="img/ph01_l.jpg" alt="">
<div id="cap">
<h2>料理名</h2>
<p>値段</p>
<p>料理の説明</p>
</div>
</li>

css

  
/*キャプション*/

li{
  position: relative;
}

#cap {
width:100%;
height:100%;
background: rgba(255,255,255,0.5);
position: absolute;
top:0;
left:0;
z-index:100;
opacity: 0;
transition: ease 0.3s;
cursor: pointer;
}
#cap:hover {
opacity: 1;
background: rgba(255,255,255,0.7);
}