图像上的悬停标题会导致图像下方出现大的白色间隙答案

【问题标题】：Hover caption on image causes big white gap below image图像上的悬停标题会导致图像下方出现大的白色间隙
【发布时间】：2017-04-07 00:51:06
【问题描述】：

我正在使用 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。

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

【问题讨论】：

标签： css image hover caption removing-whitespace

【解决方案1】：

尝试将 siteorigin-panels-stretchoverflow:hidden; height:164.89px; 添加到您的内联 CSS 中

希望这行得通。

谢谢！

【讨论】：

【解决方案2】：

你的情况
id 应该是唯一的。
因此，最好将#pic 更改为一个类
此外，您样式中的 <p> 标签包含 padding-bottom ，它会解决空白问题。

将每张图片更改为以下内容 HTML：

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

CSS：

.pic{
    position: relative;
}

.pic .text{
    position: absolute;
    top: 80px;
    width: 100%;
    visibility: hidden;
}

那么它应该可以工作了。

【讨论】：

【解决方案3】：

WordPress 主题的样式表可能有很多 CSS 膨胀，因此您在创建自定义样式表以解决您想要的样式细微差别的正确轨道上。

由于这是一个响应式主题，最好从移动优先的角度着手解决这个问题。

首先要修剪的是bottom-margin: 30px; for .panel-grid-cell，像这样：

.home #main .panel-grid-cell {
    margin-bottom: 0;
}

接下来是更正您的 HTML 标记。 pic 的值被赋予多个id 属性。 An id attribute is used to denote a unique element. The class attribute denotes a non-unique element。 pic 应该分配给 class 属性，因为布局中的许多元素都使用此挂钩值。像这样：

<div class="pic">

我注意到img.hover 和p.text 被包裹在一个不必要的<p> 标记中。确保 SiteOrigin 编辑器中不会发生这种情况。

然后，您应该为.pic div 内的段落修剪bottom-margin: 1.5em（注意将pic 指定为class 钩子.pic，而不是id 钩子，这将是#pic):

.pic p {
    margin-bottom: 0;
}

为了更接近，应在.pic div上使用相对定位，以确保后续样式建议（position: absolute;）生效：

.pic {
  position: relative;
}

然后，对于悬停图像时出现的文本：

p.text {
  position: absolute;
  width: 100%;
}

上述样式适用于移动设备，但您的主题是响应式的，您可能需要考虑不同屏幕尺寸的一些样式变化。

对于平板电脑，您需要这样的媒体查询：

@media (min-width: 600px) { 
  .some-class {
    some-property: some-value;
  }
  etc...
}

最后，对于桌面：

@media (min-width: 1000px) { 
  .some-class {
    some-property: some-value;
  }
  etc....
}

【讨论】：

【解决方案4】：

感谢大家的帮助 :) 经过一番折腾建议和软件更新，现在没有差距了！

我想我会发布我的最终代码，以防万一有人遇到类似问题，它可能会有所帮助。（注意：有一些与原始帖子不同的细微样式更改，但对其工作方式没有影响）。

HTML：

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

小部件类：

fade

CSS：

.fade {
  -webkit-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
}

.fade:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.pic {
  position: relative;
}

.text { 
  color: #FFFFFF;
  font-size: 22px;
  font-weight: bold;
  text-align: center; 
  background: rgba(214, 187, 14, 0.85);
 }

.pic .text {
  position:absolute;
  top: 0px;
  width: 100%;
  visibility:hidden;
}

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

.pic p {
  margin-bottom: 0px;
}

很高兴它终于成功了，非常感谢大家！

【讨论】：