柱形图悬停文本

问题描述：

大家好，我在那里看到我的问题:)柱形图悬停文本

我目前正在使用“砌体外观”主屏幕在网站上工作。有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

答

以下的书面记录可以帮助你：

http://geekgirllife.com/place-text-over-images-on-hover-without-javascript/

这是我碰到的最简单的方法之一。将包含文本的div标签放在img标签的正下方。

ty为提示伴侣:) –

相关推荐