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；


希望这能奏效。

谢谢!