css - 将标题悬停在图像上会导致图像下方出现大的白色间隙

Question

我正在使用 WordPress 构建一个网站。在我的主页上，我想要一个不同产品的图片网格 (10 x 3)，当您将鼠标悬停在每张图片上时，会弹出带有产品名称的标题。

我已经成功完成了 3/4，但每行下方都有巨大的空白。 :(

我正在使用 SiteOrigin 编辑器小部件插入图像，并使用 HTML 和 CSS 来编码悬停效果。请参阅下面的当前编码。

HTML:

<div id="pic">

<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Hassaku.png" />
<p class="text">Summer Mikan</p>

</div>

CSS:

.text { 
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  text-align: center; 
  background: rgba(255, 255, 255, 0.5);
 }

#pic .text {
  position:relative;
  bottom:80px;
  left:0px;
  visibility:hidden;
}

#pic:hover .text {
  visibility:visible;
}

这是网站，您可以看到我所做的事情:http://peacefruit.net

顶行有标题，但也有令人讨厌的间隙。下面三行是我希望它看起来如何的示例(图片之间没有边框或间隙)。所有行和单个小部件都没有填充、边距或装订线，并且我已经使用 CSS 将主题填充调整为 0。

我确定这是我缺少的一行简单代码，但它让我发疯! 请发送帮助。

Answer 1

尝试添加到 siteorigin-panels-stretch 的内联 CSS 溢出:隐藏； 高度:164.89px；

希望这能起作用。

谢谢!