Animated transition not starting at the right position - css

Question

I'm working on a site with a knotted rope-style bar that expands to show more information on hover, and I'm having issues getting the animation to look right. (Here's a staging link: http://couchcreative.co/tcc/).
Currently, the bar for the first step will move down to the bottom of the box before it animates upwards to its new position, while I want it to just move up to its new position on hover without starting at the bottom of the hover box. Can anyone help explain why this is happening? The relevant CSS starts with the ".look" class.
Apologies if I'm not explaining this right, but hopefully when you visit the site you'll see what I mean about the animation looking a bit… off. Thanks for the help!

Answer 1

I would rework your HTML structure to make it more semantic and less repetitious.
Demo: http://jsfiddle.net/krmn4/5/
HTML:
<a href="/testicularcancer/" class="look">
<figure><img src="http://couchcreative.co/tcc/img/look.png" /></figure>
<div class="bar"></div>
<div class="off">
<h4>Look</h4>
</div>
<div class="on">
<h4>Relax your scrotum.</h4>
<p>Check your testicles just after you’ve had a bath or shower, when the muscles in the scrotum are relaxed, making it easier for you to feel any lumps, growths or tenderness. Stand in front of the mirror. Look for any swelling on the skin of your scrotum.</p>
<span>Learn More</span>
</div>
</a>
CSS:
.look {
position: absolute;
bottom: 0;
left: 0;
width: 235px;
overflow: hidden;
/* optional styling */
color: #000;
text-align: center;
text-decoration: none;
}
.look h4 {
/* optional styling */
line-height: 48px;
font-size: 20px;
font-weight: bold;
}
.look .bar {
height: 48px;
background: url(http://couchcreative.co/tcc/img/step_1.png) 0 0 repeat-x;
margin: -24px 0 0; /* half of height */
/* necessary so figure img doesn't overlap */
position: relative;
z-index: 1;
}
.look figure,
.look .off,
.look .on {
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
transition: all 300ms linear;
height: 0;
opacity: 0;
overflow: hidden;
}
.look figure {
/* optional styling */
background-color: #b2d5e6;
padding: 12px;
margin: 0;
}
.look .off {
height: 48px;
opacity: 1;
}
/* hover state */
.look:hover .off {
height: 0;
opacity: 0;
}
.look:hover figure {
height: 120px; /* or however tall it needs to be */
opacity: 1;
}
.look:hover .on {
height: 220px; /* or however tall it needs to be */
opacity: 1;
}