CSS - полупрозрачный блок поверх картинки

исправил ошибки в верстке и выкладываю обновленный код

Возможности CSS3 иногда просто поражают своими способностями сделать одну идею несколькими способами и уложиться в 20 строк! И и в этой статье я раскажу как можно накладывать текстовые блоки поверх картинки при помощи нескольких строк кода. И да, картинка не изменяется, текст просто на нее наезжает.

Исходник:

	
	


		Formula 1 - результат и отзывы с первого этапа
		Новый сезон в формуле 1, новые правила, новые регламент, довольные и недовольные фанаты. Все в этой статье!  •  18-03-2014, 17:08
	

	
NEW

И теперь CSS:

/*Slider*/
#custom1_slider{
	position: relative;
	width: 600px; /*Важный параметр. Блоки абсолюта не будут вылазить за этот размер*/
	height: 350px;
	left: 0;
	margin: 20px auto;
	overflow: hidden;
}	

	/*Позиционирование картинки*/
	#custom1_slider img{
		width: 600px;
		height: 350px;
		float: left;
	}

	/*Текст! Черная полоса*/
	.slider_text{
		position: absolute;
		bottom: 0;	/*Привязываем к нижней части на случай большого объема текста*/
		margin-bottom: 10px; /*И просто приподнимаем чуть вверх*/
		left: 20px;	
		font:13px verdana;
		padding: 5px; 
		background: #000;
		opacity: 0.6;
	}

		/*красный заголовок на черной полосе*/
		.slider_text b{
			color: #ff0000;
			font:15px verdana;
		}
		
		/*остальной текст на черной полосе*/
		.slider_text span{
			color: #fff;
			opacity: 0.7;
		}


		.slider_text:hover{opacity: 0.8;}

	/*Красный прямоугольник*/
	.slider_new{
		position: absolute;
		top: 10px;
		border-left: 10px solid #000;
		background: #ff0000;
		padding: 6px;
		color: #000;
		font-weight: 700;
		opacity: 0.7;
	}