Wordpress 中的自定义 CSS 搞砸了

【问题标题】：Custom CSS in Wordpress messing upWordpress 中的自定义 CSS 搞砸了
【发布时间】：2016-10-17 13:39:06
【问题描述】：

我正在管理基于 Wordpress 的公司网站，我试图弄清楚如何更改我的联系页面。

我已经编写了我想做的代码：http://codepen.io/EzhnoFR/pen/PNmdxm

html：

  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/Isa.png" />
      <span>Hover</span>

</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-1.png" />
  <span> Hover </span>
</div>

        <div id="cf">
  <img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile-chute.png" />
  <img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile.png" />
  <span> Hover </span>
</div>
    </div>

css：

#cf img.top {
  -webkit-filter: grayscale(80%);
    filter: grayscale(80%);
}

#cf img.top:hover {
  opacity:0;
}

span{
  position: absolute;
    bottom: -150px;
    left: 0;
    z-index: -1;
    display: block;
    width: 225px;
    margin: 0;
    padding: 0;
    color: black;
    font-size: 25px;
    text-decoration: none;
    text-align: center;
    -webkit-transition: .7s ease-in-out;
    transition: .7s ease-in-out;
    opacity: 0;
}

#cf img.top:hover ~ span{
  opacity: 1;
}
/*-----------------------------------------------------*/
.column {
    margin: 15px 15px 0;
    padding: 0;
}
.column:last-child {
    padding-bottom: 90px;
}
.column::after {
    content: '';
    clear: both;
    display: block;
}
.column div {
    position: relative;
    float: left;
    width: 300px;
    height: 200px;
    margin: 0 0 0 50px;
    padding: 0;
}
.column div:first-child {
    margin-left: 0;
}

但是，当我将此 html 添加到我的页面和我的 wordpress 自定义 css 中的 css 时，一切都搞砸了，如您所见：http://www.alabama-pub.com/contact-new-test/

我尝试了很多东西，但我无法修复它，有人知道吗？

【问题讨论】：

• 图片标签下有多余的 br。删除它。
• @Leothelion 在页面上？
• 在此页面alabama-pub.com/contact-new-test 下

  然后在图像下。
• 请从 span 标签中删除 z-index ，你就完成了 :)
• Z-index 将在背景下隐藏该文本。在小提琴中，您可能没有，并且文本隐藏在白色背景后面。此外，您不需要 padding-bottom:90px 在 .column:last-child(parent div) 并在悬停文本的 span 标签中设置 bottom:-62px 。试试看:)