Custom CSS in Wordpress messing up

Question

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 ?

On this page alabama-pub.com/contact-new-test under <div id = cf> then under image. — Leo the lion
– Leo the lion, Commented Jun 16, 2016 at 7:25
Z-index will hide that text under the background. In fiddle you might not have that and text was hiding behind white background. Also you don't need padding-bottom:90px in .column:last-child(parent div) and make bottom:-62px in span tag of hover text. Try that :) — Leo the lion
– Leo the lion, Commented Jun 16, 2016 at 7:42

Leo the lion · Accepted Answer · 2016-06-16 07:39:08Z

3

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

edited Jun 16, 2016 at 7:39

answered Jun 16, 2016 at 7:26

Leo the lion

3,0652 gold badges26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom CSS in Wordpress messing up

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related