Q:

Привязка в html и css!

Подскажите пожалуйста! Я пытаюсь привязать текст-ссылку к фотографии но у меня не получается, подскажите как можно это сделать? Может можно как то на jquery?
Вот текст html.  

<div id="foto">
<a href=""><img  src="img/img7.jpg" alt="" /></a>
<div id="cap">
<p><a href="">Продукт компании</a></p>
</div>
</div>

Вот css!
#cap {
  z-index: 1000;
  height:35px;  
  background:#000;  
  background:rgba(0,0,0,.5);    
  width:332px;
  font-size:1em;

  color:#fff;

  border-top:1px solid #000;

  text-align:center;
  padding-bottom: 10px;
}

A:

Как то так должно сработать:
<div class="photo">
    <a href="/"><img src="img1.jpg" alt=""/></a>
    <div class="photo-title">
        Супер картинка
    </div>
</div>

<style>
    .photo {
        position: relative;
    }
    .photo-title {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        color: #fff;
        background: rgba(40,40,40,0.5);
    }
</style>

