[CSS] opacity Opcje

[-dwdsa-]

Witam,

znalazłem i przerobiłem prosty slider, który co X sekund zmienia zdjęcie. Problem jest w tym, że na tym zdjęciu jest DIV z tekstem. Slider działa tak, że ma efekt zanikania obrazka (fade+opacity). Jak zanika obrazek to zanika też DIV z tekstem.

Kombinowałem z z-index, ale nic nie wychodzi...

Kod:

[HTML] pobierz, plaintext 
#slider #frame {
	float: left;
	position: relative;
	z-index: 1;
	width: 350px;
	height: 585px;
	background: #111;
	opacity: 0.5;
}
 
#slider #frame p {
	color: #fff;
	position: relative;
	opacity: 1.0;
	z-index: 3;
}
[HTML] pobierz, plaintext 

Slider:

[HTML] pobierz, plaintext 
<script type="text/javascript">
 
		function theRotator() {
			//Set the opacity of all images to 0
			$('#slider ul li').css({opacity: 0.0});
 
			//Get the first image and display it (gets set to full opacity)
			$('#slider ul li:first').css({opacity: 1.0});
 
			setInterval('rotate()',9000);
		}
 
		function rotate() {	
			//Get the first image
			var current = ($('#slider ul li.show')?  $('#slider ul li.show') : $('#slider ul li:first'));
 
			if ( current.length == 0 ) current = $('#slider ul li:first');
 
			var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('#slider ul li:first') :current.next()) : $('#slider ul li:first'));
 
			//Set the fade in effect for the next image, the show class has higher z-index
			next.css({opacity: 0.0})
			.addClass('show')
			.animate({opacity: 1.0}, 6000);
			//Hide the current image
			current.animate({opacity: 0.0}, 3000)
			.removeClass('show');
 
		};
 
		$(document).ready(function() {
			theRotator();
			$('#slider').fadeIn(3000);
			$('#slider ul li').fadeIn(1000); // tweek for IE
		});
 
</script>
[HTML] pobierz, plaintext 

Z góry dzięki za pomoc.