css image hover animation with fluid three column layout - css

Question

I'm attempting to do a pure CSS hover on this page here: http://www.bigideaadv.com/big_idea_v2/#work
I tried using absolute positioning on both image elements and using the transition property with opacity to fade them in and out on hover. But since each parent is fluid, they just disappear. I currently have the "off" image set to relative and the "on" image set to absolute. The fade out is cool but the fade in is not because the absolute positioned image has no width and height set. I think that is the reason.
I would like a non css solution. A javascript solution is fairly easy and I could whip one up but I believe it can be done with straight css.
Anyone have any thoughts?
Structure:
<div id="work">
<p class="align-center work-copy"><span class="clarendon-italic">our</span><br />
<span class="proxima-nova">WORK</span></p>
<div id="clients">
<div class="client_box">
<a href="#modal-aaa" class="call-modal">
<img src="wp-content/themes/skeleton/images/clients/aaa_logo_off.png" alt="American Arbitration Association" />
<img src="wp-content/themes/skeleton/images/clients/aaa_logo.png" alt="American Arbitration Association" />
</a>
</div>
<div class="client_box">
<a href="#modal-art-of-shaving" class="call-modal">
<img src="wp-content/themes/skeleton/images/clients/art_of_shaving_logo_off.png" alt="Art of Shaving" />
<img src="wp-content/themes/skeleton/images/clients/art_of_shaving_logo.png" alt="Art of Shaving" />
</a>
</div>
<div class="client_box">
<a href="#modal-entenmanns" class="call-modal">
<img src="wp-content/themes/skeleton/images/clients/entenmanns_logo_off.png" alt="Entenmanns" />
<img src="wp-content/themes/skeleton/images/clients/entenmanns_logo.png" alt="Entenmanns" />
</a>
</div>
<div class="client_box">
<a href="">
<img src="wp-content/themes/skeleton/images/clients/gdlsk_logo_off.png" alt="GDLSK" />
</a>
</div>
<div class="client_box">
<a href="">
<img src="wp-content/themes/skeleton/images/clients/hale_and_hearty_logo_off.png" alt="Hale and Hearty" />
</a>
</div>
<div class="client_box">
<a href="">
<img src="wp-content/themes/skeleton/images/clients/seviroli_logo_off.png" alt="Seviroli" />
</a>
</div>
<div class="client_box">
<a href="">
<img src="wp-content/themes/skeleton/images/clients/aaa_logo_off.png" alt="American Arbitration Association" />
</a>
</div>
<div class="client_box">
<a href="">
<img src="wp-content/themes/skeleton/images/clients/art_of_shaving_logo_off.png" alt="Art of Shaving" />
</a>
</div>
<div class="client_box">
<a href="">
<img src="wp-content/themes/skeleton/images/clients/entenmanns_logo_off.png" alt="Entenmanns" />
</a>
</div>
</div>
<p class="align-center team-arrow"><img src="wp-content/themes/skeleton/images/down_arrow.png" alt="Down arrow" /></p>
</div>
CSS:
.client_box img {
display: block;
margin: 0 auto;
width: 90%;
max-width: 260px;
}
#work .client_box a[href*="modal"] {
position: relative;
margin: 0 auto 0 auto;
}
#work a[href*="modal"] img {
position: relative;
top: 0;
left: 0;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
#work a[href*="modal"] img:nth-child(2) {
position: absolute;
}
#work a[href*="modal"] img:nth-child(1) {
opacity: 1;
}
#work a[href*="modal"] img:nth-child(1):hover {
opacity: 0;
}
#work a[href*="modal"] img:nth-child(2) {
opacity: 0;
}
#work a[href*="modal"] img:nth-child(2):hover {
opacity: 1;
}
#work .client_box:nth-child(3n) {
border-right: 0;
}

Answer 1

You can do this - along with opacity/transition, manipulate the height as well.
#work a img {
position:relative;
margin:0 auto;
opacity:1;
display:block;
transition-property:display, opacity;
transition-duration:.5s;
transition-timing-function:ease-in-out;
}
#work a img:nth-child(2) {
opacity: 0;
height:0;
overflow:hidden;
}
/*hover*/
#work a:hover img:nth-child(1) {
opacity:0;
height:0;
}
#work a:hover img:nth-child(2) {
opacity:1;
height:auto;
}
The initial fade-in isn't perfect but looks good.
I had to change some inherited CSS within your current code, so here is an extract: http://jsfiddle.net/uRQxa/1/