CSS transitions blocking each other - css

Question

Following example explains my problem:
Link: http://jsfiddle.net/sTFT3/1/
HTML
<div class="parent">
<img src="http://farm8.staticflickr.com/7292/9388249554_18f230a0ce_z.jpg" class="image"/>
<img src="http://farm3.staticflickr.com/2814/9389265805_1fd4040203_z.jpg"/>
<span class="text">Lorem Ipsum</span>
</div>
CSS
.parent {
position: relative
}
.parent .text {
position: absolute;
top: 0;
left: 0;
background: #ccc;
width: 80%;
max-height: 0;
overflow: hidden;
-webkit-transition : max-height 1s linear 0s;
-moz-transition : max-height 1s linear 0s;
-ms-transition : max-height 1s linear 0s;
-o-transition : max-height 1s linear 0s;
transition : max-height 1s linear 0s;
}
.image {
position: absolute;
opacity: 0;
-webkit-transition : opacity 1s ease-in 0s;
-moz-transition : opacity 1s ease-in 0s;
-ms-transition : opacity 1s ease-in 0s;
-o-transition : opacity 1s ease-in 0s;
transition : opacity 1s ease-in 0s;
}
.parent:hover .text {
max-height: 600px;
}
.parent:hover .image {
opacity: 1;
}
I need the animations to start together, but they are waiting for each other. Couldn't find anyone else with that kind of problem.

Answer 1

They start at the same time, but because you have a max-height of 600px's on the top div it finishes faster. Change this to a lower value and they will animate at the same time and duration
http://jsfiddle.net/sTFT3/2/
The problem is that if you set max-height of 600 while the div is only 20 px's big, it will increase the animation drasticly because it will animate to 600px's height in 1 second instead of 20px's.