Ezhno Ezhno - 4 months ago 6x
HTML Question

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" />


<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 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>

css :

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

#cf img.top:hover {

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 ?


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