悬停在图像上的标题会导致图像下方出现白色的空白

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

我确定这是一条简单的代码，我错过了，但它让我疯狂！请发送帮助。

来源

2016-11-23 pepper222

尝试添加到您的内联CSS的siteorigin-板拉伸 overflow:hidden; height:164.89px;

希望这个作品。

谢谢！

来源

2016-11-23 06:28:05 realtymarker

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

改变每个PIC以下 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; 
}

那么它应该工作。

来源

2016-11-23 07:08:18

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

来源

2016-11-23 07:35:31 jacefarm

谢谢大家对你的帮助:)一些与周围摆弄后建议和软件更新，现在没有差距！

我以为我会发布我的最终代码，以防任何人有类似的问题，它可能有一定的帮助。（注意：有些小的样式变化与原始文章不同，但对其工作方式没有影响）。

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类：

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

真高兴终于作品，多感谢大家！

来源

2016-12-12 00:45:42 pepper222

悬停在图像上的标题会导致图像下方出现白色的空白

回答

相关问题