Форум программистов
 
О проблемах, например, с регистрацией пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail


Ответ
 
Опции темы
Старый 25.05.2015, 14:19   #1
Luara
Пользователь
 
Регистрация: 14.04.2015
Сообщений: 29
По умолчанию Всплывающий полупрозрачный фон с надписью.

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

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

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

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

Всякие готовые ховер-эффекты я уже пробовала, но безрезультатно((
Luara вне форума Ответить с цитированием
Старый 25.05.2015, 17:09   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Можно (10 символов)
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 25.05.2015, 18:09   #3
Luara
Пользователь
 
Регистрация: 14.04.2015
Сообщений: 29
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Можно (10 символов)
Спасибо

Например, как?
Luara вне форума Ответить с цитированием
Старый 25.05.2015, 20:02   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Например, при наведении делаешь поверх картинки полупрозрачный фон, а поверх него — надпись.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 26.05.2015, 10:23   #5
Luara
Пользователь
 
Регистрация: 14.04.2015
Сообщений: 29
По умолчанию

Спасибо.

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

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

Код:
	<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;
}

Последний раз редактировалось Luara; 26.05.2015 в 11:14.
Luara вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающий блок mihmihail Помощь студентам 0 28.04.2013 21:52
Полупрозрачный image postal2 Мультимедиа в Delphi 11 23.05.2012 18:30
Полупрозрачный DIV X@OC HTML и CSS 3 18.04.2011 07:54
Всплывающий фрейм Yesdresser PHP 1 05.02.2011 12:38
Кнопка с вертикальной надписью Pirit Компоненты Delphi 18 15.04.2009 00:37


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS