Column-изображение парения текст

Привет всем, кто читает мой вопрос :)Column-изображение парения текст

Я в настоящее время работает на сайте с «Масонство-двойники» домашний экран. Имеются 4x4 изображения с 2 различными размерами и 1 изображение в каждом столбце скрыто.

До сих пор все прошло довольно хорошо, но теперь я застрял на текстовом эффекте при наведении одного из изображений.

Когда курсор hovering над номером image, в нижней части его должен появиться маленький text-box.

Как я могу получить их один над другим, не разрушая масонство?
Где разместить текст в html-коде?

Извините за мой английский, его не самое лучшее, так как я из Австрии;)

HTML:

<!DOCTYPE html> 
<!-- HTML --> 
<html> 
<!-- HEAD --> 

<head> 
    <!-- STYLESHEET --> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 

    <!-- UTF-8 --> 
    <meta charset="utf-8"> 

</head> 
<!-- HEAD END --> 
<!-- --------------------------------------------------------------- --> 
<!-- BODY --> 

<body> 
    <div id="img-container"> 
     <ul id="content"> 
      <li><img class="img_a" src="data/placeholder_a.png" alt="" /> 
      </li> 
      <li><img class="img_c" src="data/placeholder_c.png" alt="" /> 
      </li> 
      <li><img class="img_b" src="data/placeholder_b.png" alt="" /> 
      </li> 

      <li><img class="img_a" src="data/placeholder_a.png" alt="" /> 
      </li> 
      <li><img class="img_a" src="data/placeholder_a.png" alt="" /> 
      </li> 
      <li><img class="img_a" src="data/placeholder_a.png" alt="" /> 
      </li> 
      <li><img class="img_c" src="data/placeholder_c.png" alt="" /> 
      </li> 

      <li><img class="img_b" src="data/placeholder_b.png" alt="" /> 
      </li> 
      <li><img class="img_c" src="data/placeholder_c.png" alt="" /> 
      </li> 
      <li><img class="img_a" src="data/placeholder_a.png" alt="" /> 
      </li> 

      <li><img class="img_a" src="data/placeholder_a.png" alt="" /> 
      </li> 
      <li><img class="img_c" src="data/placeholder_c.png" alt="" /> 
      </li> 
      <li><img class="img_b" src="data/placeholder_b.png" alt="" /> 
      </li> 
     </ul> 
    </div> 
</body> 
<!-- BODY END --> 

</html> 
<!-- HTML END -->

CSS:

body { 
    margin: 0; 
    padding: 0; 
} 
#img-container { 
    width: 1200px; 
    margin: 0 auto; 
    font-size: 0; 
} 
#content { 
    column-count: 4; 
    column-gap: 10px; 
} 
#content li img { 
    margin-bottom: 10px; 
    width: 100%; 
    display: block; 
} 
/* --------------------- HOVER EFFECTS --------------------- */ 

.img_a:hover { 
    opacity: 0.5; 
} 
.img_b:hover { 
    opacity: 0.5; 
} 
.img_c:hover { 
    opacity: 0.5; 
}

Я добавит некоторый почтовый индекс .-файл с .css .html и изображениями. Link to Dropbox

источник

2016-08-19 Fabian Steinkogler