I want to add a toggleFade to this hover (add class), but because of the transition to display:block it's effecting how everything lines up in the display:inline-block;

http://jsfiddle.net/lecollective/MenG7/1/

 

If what your trying to do is a rollover where the image fades away on hover to reveal the title below then to fade back to it's original state then there is no need to use any JavaScript. I've modified the code and simplified the html to give the desired result:

 

<div class="brand-thumbnail">                
    <h1 class="brand-title">
        Hello
    </h1>
    <img class="imgclass"  src="http://clubworld360.com/data/venues/1404/full_noImage%20-%20Copy%20(2)%20-%20Copy.jpg"/>
</div>
            
<div class="brand-thumbnail">                
    <h1 class="brand-title">
        Hello
    </h1>
    <img class="imgclass"  src="http://clubworld360.com/data/venues/1404/full_noImage%20-%20Copy%20(2)%20-%20Copy.jpg"/>
</div>

 

 

.brand-thumbnail {
    display: inline-block;
    position: relative;
    width: 100px;
    height:100px;
}
.brand-thumbnail:hover .imgclass {
    opacity: 0;
}
.imgclass {
    position: absolute;
    top: 0;
    left: 0;
    width:100px;
    height:auto:
    opacity: 1;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        transition: 0.4s;

}
.brand-title {
    position: absolute;
    top: 0;
    left: 0;
}

 

paste that lot into your fiddle and it will do what you are looking for - if my interpretation was indeed correct.