Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
falosun
5 / 5 / 3
Регистрация: 29.03.2014
Сообщений: 48
1

Фон и текст при наведение на картинку

10.05.2014, 21:59. Просмотров 977. Ответов 3
Метки нет (Все метки)

Привет, друзья.
В jscript я дубок, поэтому прощу помощи, мне нужен скрипт, чтобы при наведение мыши на картинку на нее накладывался:
CSS
1
background: rbga(0,0,0,.3);
И в центре блока:
HTML5
1
2
<p>Заголовок</p>
<p>Текст</p>
p.s Цвет и текст я подкорректирую, по желанию можете добавить анимации какой-нибудь.
В итоге нужен такой результат при наведение на картинку -
0
Миниатюры
Фон и текст при наведение на картинку  
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.05.2014, 21:59
Ответы с готовыми решениями:

При наведении на картинку текст
доброго времени друзья! возникла чрезвучайная необходимость внедрить.....

При клике менять картинку и текст под ней
Я недели две назад начал изучатьjavaScript и столкнулся с такой проблемой:не...

Поменять фон div по клику на картинку
Добрый день подскажите новичку как поменять фон div по клику на картинку. &lt;img...

Изменение изображений при наведение мыши
Доброго времени суток, уважаемые форумчане. Вопрос ребят в следующем. есть...

плавное увелечение картинки при наведение
&lt;div id=&quot;Galeri&quot;&gt;&lt;img src=&quot;img/387395.jpg&quot;&gt;&lt;/div&gt; #Galeri{ width:150px;...

3
newJS
2397 / 1070 / 307
Регистрация: 23.06.2011
Сообщений: 3,330
11.05.2014, 06:26 2
типа так?
HTML5
1
2
3
<div class="rel">
<img src="pics/nature_003.jpg" alt="">
<div class="pad"><div>тут типа текст<br>весь текст с возможной разметкой располагать только внутри этого дива</div></div>
CSS
1
2
3
4
5
6
.rel {position:relative; top:0px; left:0px; display:inline-block;}
.rel img {vertical-align:top;}
.rel .pad {position:absolute; top:0px; left:0px; visibility:hidden;}
.rel .pad {background:lavender; width:100%;}
.rel .pad>div {padding:7px;}
.rel:hover div.pad { visibility:visible;}
1
kalabuni
11.05.2014, 07:35
  #3

Не по теме:

falosun, поработайте над пунктуацией и стилистикой текста блока

-- дефис между "вам" и "Ислам" не нужен, там нужно имя "Ислам" с двух сторон обнести запятыми

-- после слова "группа" требуется точка

-- при персональном обращении "Вам" и "Ваше" принято писать с заглавной буквы

-- благодарите вы товарищей "за работу", "за терпение", а "профессионализм" у вас почему-то без предлога "за", хотя по смыслу вы благодарите именно "за профессионализм"... либо добавьте предлог, либо последнее слово "ваше" напишите во множественном числе - "за Ваши безграничное терпение и профессионализм"

-- в одном абзаце использовать "благодарна вам" и "благодаря вам" (вкупе с завершающим "спасибо [вам]") - это явная тавтология

0
falosun
5 / 5 / 3
Регистрация: 29.03.2014
Сообщений: 48
11.05.2014, 16:05  [ТС] 4
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

Конечно можно и так, но мне нужен js скрипт, вариант с html+css не подходит, так-как нет возможности вставить в код.

Добавлено через 2 часа 35 минут
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var backGround = 'rgba(51,159,226,0)';
$('#block-new40').hover(function(){
    startOpacity = parseFloat($(this).css('background'));
    $(this).css('background', 'rgba(51,159,226,.67');
}, function(){
    $(this).css('background', backGround);
});
 
var startOpacity = 0;
$('#block-new40').hover(function(){
    startOpacity = parseFloat($(this).css('opacity'));
    $(this).css('opacity', '1');
}, function(){
    $(this).css('opacity', startOpacity);
});
|

Решил так.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.05.2014, 16:05

Замена картинки при наведение мыши
Не могу разобрать что далее для события писать, чтобы при наведение на картинку...

Изменение цвета текста при наведение курсором
Добрый вечер, увидел на одном из форумов сообщение, цвет текста был серым...

Вызов функции при наведение мыши на кнопку
function checklo(){ var pole = document.getElementById(&quot;text&quot;).value; if...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru