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

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

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


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

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

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

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

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

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

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

Можно (10 символов)
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 25.05.2015, 19:09   #3
Luara
Пользователь
 
Регистрация: 14.04.2015
Сообщений: 29
Репутация: 10
По умолчанию

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

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

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

Спасибо.

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

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

Код:
	<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 в 12:14.
Luara вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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


07:04.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.