我正在使用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
。
我确定这是一个我想念的简单代码,但它让我发疯了! 请发送帮助。
答案 0 :(得分:1)
尝试添加到siteorigin-panels-stretch
overflow:hidden;
height:164.89px;
希望这有效。
谢谢!
答案 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 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....
}
答案 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;
}
很高兴它终于有效了,非常感谢所有人!