Всплывающий полупрозрачный фон с надписью.

[Luara]

Здравствуйте.

Есть галерея фото, выглядит вот так:
http://prntscr.com/7958u6

Нужно сделать так, что бы при наведении мыши на конкретный элемент, этот самый элемент выглядел вот так:
http://prntscr.com/795ac6

Подскажите, пожалуйста, можно ли это сделать при помощи CSS/HTML?

Всякие готовые ховер-эффекты я уже пробовала, но безрезультатно((

[Naive]

Можно (10 символов)

[Luara]

Сообщение от Naive

Можно (10 символов)

Спасибо

Например, как?

[Naive]

Например, при наведении делаешь поверх картинки полупрозрачный фон, а поверх него — надпись.

[Luara]

Спасибо.

Забыла написать самое главное: вот этот всплывающий полупрозрачный фон должен быть ссылкой на внутреннюю страницу (портфолио), а ссылка (надпись) - на сайт компании.

В теории это возможно, на практике - сложновато. Пока не получается.

	<div class="slide">
		<div class="mask">
			<a href="#" target="_blank"><img src=../images/aromaland.jpg">
				<div class="block-info">
					<div class="info">
						<img src="/img/design/point.png">
						<h3>КАТАЛОГ <br/> БИО-ДОБАВОК<br/>КОМПАНИИ<br/> АРОМАЛЕНД</h3>
					</div>
				</div>
			</a>            
        </div>
		<a href="http://aromaland.com./" class="info-mask" target="_blank">www.aromaland.com</a>
	</div>

...
.mask {
        height: 217px;
}
.slide a:hover { 
	opacity: 0.7 !important;
	position: relative;	
}
...
.mask:hover{
	background: rgba(130,85,77,0.8); /* Полупрозрачный цвет фона */
}

a.info-mask {
	top: 30%;
	left: 30%;
	position: absolute;
	font-family: arial, sans-serif;
	font-size: 14px;
	color: #fff !important;
	visibility: hidden;
}