[latter-day]

Задача для меня пока ещё сложная, поэтому прошу помощи.
Необходимо, чтобы при наведении курсора на блок с классом .video_frame[i] плавно исчезал соответствующий ему блок с названием .title_box[i].

Причём нужно сначала плавно изменить opacity для .title_box[i] до нуля, а потом изменить z-index блока на -1. Плавное изменение прозрачности — визуальный эффект, а z-index необходимо изменить, чтобы title_box не перекрывал элементы управления видео.

Поддержка старых IE не нужна.

Кусок кода, который получилось набросать (естественно, что работает он только для первого .title_box):

var video_frames = document.querySelectorAll('#movies .video_frame');
	var title_boxes = document.querySelectorAll('#movies .title_box');
		for (var i = 0, video_frame; video_frame = video_frames[i]; i++){
			video_frame.onmouseover = hide_title;
			video_frame.onmouseout = show_title;
		}
	var box_style = title_boxes[0].style;
	function hide_title(){box_style.opacity='0'; box_style.zIndex='-1'}
	function show_title(){box_style.opacity='1'; box_style.zIndex='1'}

Ссылка на сверстанную страницу: http://www.ilyanelin.ru/video

Кусок html-кода:

<div id="movies">
	<div class="video_frame">
		<div class="title_box">
			<div class="video_title">
				<strong>the last september</strong><br />(promo trailer)
			</div>
		</div>
		<iframe src="http://player.vimeo.com/video/46383763?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"
		webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
	</div>
</div>