Полупрозрачная картинка над текстом

@bogdan_us91 · Регистрация: 03.11.2012

Студворк — интернет-сервис помощи студентам

Всем здравствуйте. Такая проблемма нужно написать скрипт который делает картинку полупрозрачной, а под ней должен быть текст ссылки и прочее. Собственно проблемма в том что картинка становится прозрачной,а с текстом ничего сделать не возможно ни выделить ни по ссылке перейти. Что можно сделать вот исходники.
Html:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/buttons.css" />
<link rel="shortcut icon" href="http://www.rudebox.org.ua/wp-content/themes/mystique/favicon.ico" />
 
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<title>Смена картинок при наведении курсора</title>
 
<script type="text/javascript">
$(function() {
$(".slideBox").hover(function(){
$(this).find("img").animate({opacity:'1'},1); // В данной строке задаётся начальная прозрачность элемента.
$(this).mouseover(function(){
$(this).find("img").stop().animate({opacity:'0.5'},1); // В данной строке задаётся прозрачность элемента при наведении курсора.
});
$(this).mouseout(function(){
$(this).find("img").stop().animate({opacity:'1'},1); // В данной строке задаётся прозрачность элемента при уходе курсора с элемента.
});
});
});
 
</script>
 
</head>
 
<body>
 
<div id="container">
 
<div class="slideBox">
<img src="images/picture1.jpg" alt="testing" />
 
<div class="content">
<h1>Создание слайдера с применением Canvas</h1>
<p><strong><a href="http://www.rudebox.org.ua/slaider-canvas-rudebox/"><div class="buttons"><a class="green goodbutton">Читать</a></div> </p>
</div>
 
</div>
</div><!--end slideBox-->
 
<div class="slideBox">
<img src="images/picture2.jpg" alt="testing" />
 
<div class="content">
<h1>Вертикальное раздвижное меню на jQuery</h1>
<p><strong><a href="http://www.rudebox.org.ua/vertikalnoe-razdvizshnoe-menu/"><div class="buttons"><a class="green goodbutton">Читать</a></div> </p>
</div>
 
</div>
</div><!--end slideBox-->
 
<div class="slideBox">
<img src="images/picture3.jpg" alt="testing" />
 
<div class="content">
<h1>Скользящие панели с помощью jQuery</h1>
<p><strong><a href="http://www.rudebox.org.ua/skolzyashye-paneli-rudebox/"><div class="buttons"><a class="green goodbutton">Читать</a></div> </p>
</div>
 
</div>
</div><!--end slideBox-->
 
</div><!--end container-->
 
</body>
</html>

Css: если нужно

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
body {
font-family: Tahoma;
font-size: 12px;
color: #fff;
line-height: 150%;
background-color: #6081c4;
background: #000000 url(../images/header.jpg) no-repeat center top;
}
 
h1 {
margin: 20px;
font-size: 18px;
}
 
#container {
width: 650px;
margin: 200px auto;
}
 
div.slideBox {
width: 200px;
height: 200px;
position: relative;
float: left;
margin-right: 25px;
overflow: hidden;
border: 5px solid #ccc; 
border-radius: 200px;
-o-border-radius: 200px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
 
}
 
div.slideBox img {
position: absolute;
z-index: 2;
width: 200px;
height: 200px;
border-radius: 200px;
-o-border-radius: 200px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
}
 
div.slideBox div.content {
position: center;
 
z-index: 1;
padding: 10px;
}

Всем за ранее большое спасибо. Это мой первый проект так что если вопрос показался глупым извините.

Vovan-VE · 03.11.2012, 14:53

А что, если поместить картинку не над, а под текстом? Если она полупрозрачная, то никто и не заметить разницы.

@bogdan_us91 · 03.11.2012, 17:20 **[ТС]**

Оно бы и хорошо. Но идея такова что с начала картинка не прозрачная а только при наведении становится прозрачной.

@hellebey · 06.11.2012, 10:03

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

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	03.11.2012, 14:53
	А что, если поместить картинку не над, а под текстом? Если она полупрозрачная, то никто и не заметить разницы. 0

@bogdan_us91 0 / 0 / 0 Регистрация: 03.11.2012 Сообщений: 4
	03.11.2012, 17:20 [ТС]
	Оно бы и хорошо. Но идея такова что с начала картинка не прозрачная а только при наведении становится прозрачной. 0

@hellebey 5 / 8 / 5 Регистрация: 01.11.2012 Сообщений: 50
	06.11.2012, 10:03
	ты так не сможешь же тыкнуть на ссылки и пч. изначально делаешь контент со ссылками и текстом полностью прозрачным картинку под текст при наведении на картинку или текст, прозрачность контента повышается, картинки понижается. 1