CODEWITHSUNDEEP
htmlcsswordpress
B.T
B.T

Reputation: 551

Custom CSS in Wordpress messing up

I'm managing the website of my company which is based on Wordpress and I try to figure out how to change my contact page.

I've made a codepen of what I want to do : 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;
}

However, when I add this html to my page and the css in my wordpress custom css, it all mess up as you can see : http://www.alabama-pub.com/contact-new-test/

I've tried a lot of things but I can't get to fix it, does anyone has any idea ?

Upvotes: 1

Views: 224

Answers (1)

Leo the lion
Leo the lion

Reputation: 3065

You have extra < br > under image tag which is causing the issue of height changes on hover.

According to other issue please remove z-index from span tag and you are done :)

see Here

Upvotes: 3

Related Questions