Как сделать кликабельной всю область после наложения на неё слоя в определённом месте

@Drakon36 · Регистрация: 05.06.2019

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

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

На странице есть слайдер, в нём 5 картинок. Каждая картинка изначальна была ссылкой на другую страницу сайта. Но увидела эффект, когда при наведении курсора на эту область внутрь как-бы "вплывает" другая область с текстом и она слегка затемнена (при этом прозрачна в целом). То есть, таже самая картинка остаётся только уже с текстом. И получается: там где этого затемнения нет, область кликабельна, и даже span (с текстом) я заключила в ссылки (они тоже кликабельны), НО! фактически треть этого слайда не кликабельна. Не знаю как сделать правильно, чтобы весь слайд с использованием этого эффекта стал работающей ссылкой. Можете подсказать?

@Neznayka_Sh · 05.06.2019, 20:50

Можна, пожалуйста скрины и код?
А так попробуйте установить z-index своей ссылке больше, чем остальным объектам, мб поможет.

@Drakon36 · 06.06.2019, 09:06 **[ТС]**

z-индексы пробовала - не получилось. Про opacity читала, что тоже может помочь - не получилось.

Вот часть кода по слайдеру:

Сейчас работаю с первым слайдом, как только пойму как надо делать, сделаю остальные.

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
<div class="wrapper">
    <input type="radio" name="point" id="slide1" checked>
    <input type="radio" name="point" id="slide2">
    <input type="radio" name="point" id="slide3">
    <input type="radio" name="point" id="slide4">
    <input type="radio" name="point" id="slide5">
    <div class="slider">
        <div class="slides slide1"><div class="thumbs"><a href="Gruzoperevozki.html"><img src="img/slide01.jpg" alt="32"></a>
        <div class="caption">
        <a href="Gruzoperevozki.html"><span class="title">Грузовые автоперевозки</span></a>
        <a href="Gruzoperevozki.html"><span class="info">Для заказа кликните СЮДА</span></a>
        </div>
    </div>
    </div>
        <div class="slides slide2"><a href="Gruzoperevozki.html"><img src="img/slide02.jpg" alt="32"></a></div>
        <div class="slides slide3"><a href="sklad.html"><img src="img/slide03.jpg" alt="32"></a></div>
        <div class="slides slide4"><a href="Strahovanie.html"><img src="img/slide04.jpg" alt="32"></a></div>
        <div class="slides slide5"><a href="sopr.html"><img src="img/slide05.jpg" alt="32"></a></div>
    </div>
    <div class="controls">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
        <label for="slide5"></label>
    </div>
    </div>

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
html, body {
height: 100%;
margin: 0;
/*background: linear-gradient(to right, #FFE853, #FFF6B8);*/
}
.wrapper {
    height: 350px;
    margin: 100px auto 0;
    position: relative;
    width: 700px;
}
 
.slider {
    height: inherit;
    overflow: hidden;
    position: relative;
    width: inherit;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
 
.slides {
    height: inherit;
    opacity: 0;
    position: absolute;
    width: inherit;
    z-index: 0;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    -moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    transition: transform ease-in-out .5s, opacity ease-in-out .5s;
}
 
#slide1:checked ~ .slider > .slide1,
#slide2:checked ~ .slider > .slide2,
#slide3:checked ~ .slider > .slide3,
#slide4:checked ~ .slider > .slide4,
#slide5:checked ~ .slider > .slide5 {
    opacity: 1;
    z-index: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
 
.wrapper > input {
    display: none;
}
 
.wrapper .controls {
    left: 50%;
    margin-left: -98px;
    position: absolute;
}
 
.wrapper label {
    cursor: pointer;
    display: inline-block;
    height: 8px;
    margin: 25px 12px 0 16px;
    position: relative;
    width: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background ease-in-out .5s;
    -moz-transition: background ease-in-out .5s;
    -o-transition: background ease-in-out .5s;
    transition: background ease-in-out .5s;
}
 
.wrapper label:hover, 
#slide1:checked ~ .controls label:nth-of-type(1),
#slide2:checked ~ .controls label:nth-of-type(2),
#slide3:checked ~ .controls label:nth-of-type(3),
#slide4:checked ~ .controls label:nth-of-type(4),
#slide5:checked ~ .controls label:nth-of-type(5) {
    background: #ddd;
}
 
.wrapper label:after {
    border: 2px solid #ddd;
    content: " ";
    display: block;
    height: 12px;
    left: -4px;
    position: absolute;
    top: -4px;
    width: 12px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.thumbs {
  width: 100%;
  max-width: 700px; /* опционально */
  margin: 0px;
  opacity: .97;
  overflow: hidden;
  position: relative;
  border-radius: 0px;
  cursor: pointer;
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
 
.thumbs:before {
  content: '';
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  width: 100%;
  height: 50%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
 
.thumbs img {
  display: block;
  width: 100%; /* ширина картинки */
  height: auto; /* высота картинки */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
 
.thumbs .caption {
  width: 100%;
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  text-align: center;
}
.thumbs .caption span {
  display: block;
  opacity: 0;
  position: relative;
  top: 100px;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.thumbs .caption .title {
  line-height: 1;
  font-weight: normal;
  font-size: 26px;
  color: #FFFFFF;
}
.thumbs .caption .info {
  line-height: 1.2;
  margin-top: 5px;
  font-size: 18px;
  color: #FFFFFF;
}
.thumbs:focus:before,
.thumbs:focus span, .thumbs:hover:before,
.thumbs:hover span {
  opacity: 1;
}
.thumbs:focus:before, .thumbs:hover:before {
  top: 50%;
}
.thumbs:focus span, .thumbs:hover span {
  top: 0;
}
.thumbs:focus .title, .thumbs:hover .title {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.thumbs:focus .info, .thumbs:hover .info {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@Drakon36 0 / 0 / 0 Регистрация: 05.06.2019 Сообщений: 19

	Как сделать кликабельной всю область после наложения на неё слоя в определённом месте 05.06.2019, 16:31. Показов 5059. Ответов 2 Метки ссылка (Все метки) Здравствуйте На странице есть слайдер, в нём 5 картинок. Каждая картинка изначальна была ссылкой на другую страницу сайта. Но увидела эффект, когда при наведении курсора на эту область внутрь как-бы "вплывает" другая область с текстом и она слегка затемнена (при этом прозрачна в целом). То есть, таже самая картинка остаётся только уже с текстом. И получается: там где этого затемнения нет, область кликабельна, и даже span (с текстом) я заключила в ссылки (они тоже кликабельны), НО! фактически треть этого слайда не кликабельна. Не знаю как сделать правильно, чтобы весь слайд с использованием этого эффекта стал работающей ссылкой. Можете подсказать? 0

@Neznayka_Sh 1 / 1 / 0 Регистрация: 05.10.2017 Сообщений: 33
	05.06.2019, 20:50
	Можна, пожалуйста скрины и код? А так попробуйте установить z-index своей ссылке больше, чем остальным объектам, мб поможет. 0