画像の上下をトリミングしたい

CSSで画像を切り抜く方法（トリミング）が意外と便利というのを参考にやってみるとできた。

例

<div class="photo">
    <img src="" alt="" />
</div>

div.photo {
    width: 200px;
    position: relative;
}
div.photo img {
    width: 200px;
    position: absolute;
    clip: rect(0px 200px 100px 0px);
}

んでもって、文字を加えたい。

<div class="box">
<h3>titel</h3>
<div class="photo">
    <img src="" alt="" />
</div>
<p>comment</p>
</div>

こーするとPが画像の下に隠れていた。面倒くさいのでPの位置をH3の真下に移動することでオシマイにしたけど、いつかはCSSで何とかしたい。