и соответственно .brighten img

непонятки какие-то)))

Можно сделать минимум тремя способами плюс один, если использовать скрипт.

Но эффект несложный, я бы делала без скрипта.

И если делать без скрипта, то в коде html у вас должен быть блок с текстом, скажем Some text. Ставим его после картинки, получается:

Some text

Дописываем в стили для класса .grow.pic {position:relative} и прописываем для нашего текста такое:

.text{

position: absolute; //абсолютная позиция относительно родителя

bottom:0px; left:0; // расположение

width: 100%; height: 55px; //размеры

background: rgba (0, 0, 0, 0.5); //цвет фона

display:none; //скрываем элемент

}

Для того, чтобы текста сначала не было, а потом он появился при наведении, нужно задать стили для события hover

Для события hover для класса .grow пишем следующее:

.grow:hover .text{display:block }

Или можно использовать не свойство display, а свойство visibility:

.text{visibility:hidden}

.grow:hover .text{visibility:visible }

Или еще вариант задать высоту в ноль, а потом выставить в нужную:

.text{height:0}

.grow:hover .text{

height:50px;

-moz-transition:height 1s ease 0s //для красоты перехода можно тоже задать транзишн.

}