Wordpress中的自定义CSS弄乱了

Question

我正在管理我公司的网站，该网站基于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/

我尝试过很多事情，但我无法修复它，是否有人有任何想法？

Answer 1

你有额外＆lt; br＆gt;在图像标记下，导致悬停时出现高度变化问题。

根据其他问题，请从span标记中删除z-index，您就完成了：）

请参阅