柱形圖懸停文本

大家好，我在那裏看到我的問題:)柱形圖懸停文本

我目前正在使用「砌體外觀」主屏幕在網站上工作。有2個不同大小的4x4圖像和每列中的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; 
}

我會追加一些zip 。文件與.css .html和圖像。 Link to Dropbox

來源

2016-08-19 Fabian Steinkogler