использование hover на div не работает

Вы можете посетить сайт здесь (нажмите "портфолио", чтобы перейти к соответствующей части для этого вопроса).

Я пытаюсь создать заголовок, чтобы появиться, когда изображение зависло. Я отформатировал изображения, а также текст, появляющийся при зависании. Я установил видимость div для скрытия и использовал ярлык hover, чтобы сделать его видимым, но он отказывается снова появляться при парящем. Как я могу заставить div фактически появляться при парящем?

Здесь мой HTML (только первый li, чтобы сохранить сообщение коротким)

<li>
  <a href="#openModal1">
    <div class="imgwrap">
      <img src="portfolio_images/poster.png">
      <div class="textwrap"><p class="imgdes">Pedalfest Poster</p></div>
    </div>
  </a>
</li>

И CSS

.imgwrap {
height:150px; width:150px;
}

.textwrap {
position:absolute;
width:150px; height:30px;
background-color:#727272;
margin-top:-30px;
visibility: hidden;
}

.imgdes {
text-align:center; font-family: Droid serif, serif;
font-weight:500; font-size:14px;
line-height:30px;
text-decoration:none; color:#f7f7f7;
top:50%;
}

.textwrap:hover {
visibility: visible;
}