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 overflow:hidden; height:164.89px;

的内联css

希望这有效。

谢谢！

Answer 2

在你的情况下 id应该是唯一的。
因此，最好将#pic更改为类此外，您的样式中的<p>标记包含填充底部，这将解决空白问题。

将每张照片更改为以下内容 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;
}

然后它应该工作。

Answer 3

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

由于这是一个响应主题，因此最好从移动优先的角度开始解决这个问题。

修剪的第一件事是bottom-margin: 30px; .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编辑器中不会发生这种情况。

然后，您应该bottom-margin: 1.5em修剪.pic div内的段落（请注意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....
}

Answer 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>

WIDGET CLASS：

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;
}

很高兴它终于有效了，非常感谢所有人！

图像上的悬停字幕会在图像下方产生较大的白色间隙

4 个答案: