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

时间:2016-11-23 06:09:14

标签: css image hover caption removing-whitespace

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

我确定这是一个我想念的简单代码,但它让我发疯了! 请发送帮助。

4 个答案:

答案 0 :(得分:1)

尝试添加到siteorigin-panels-stretch overflow:hidden; height:164.89px;

的内联css

希望这有效。

谢谢!

答案 1 :(得分:1)

在你的情况下 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;
}

然后它应该工作。

答案 2 :(得分:1)

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 elementpic应该分配给class属性,因为布局中的许多元素都使用此挂钩值。像这样:

<div class="pic">

我注意到img.hoverp.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....
}

答案 3 :(得分:0)

感谢大家的帮助:)经过一些摆弄建议和软件更新后,现在没有差距了!

我以为我会发布我的最终代码,万一有人遇到类似的问题,可能会有所帮助。 (注意:有一些次要的样式更改与原始帖子不同,但对其工作方式没有影响。)

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

很高兴它终于有效了,非常感谢所有人!