Изменить z-индекс другого элемента при наведении ⇐ CSS

[Anonymous]

У меня есть такой HTML:

Код: Выделить всё

Header1
&#9642 Header2a &#9642 Header2b &#9642

[url=https://player.vimeo.com/video/xxxxxx?transparent=0]
[img]Thumbnails/project1.png[/img]
[/url]

Нажатие на теги с class="video" запускает плагин JS, который открывает видеоплеер на странице.

При нажатии на теги с class="video" активируется плагин JS, который открывает видеоплеер на странице.

При нажатии на теги с class="video" активируется плагин JS, который открывает видеоплеер на странице.

При нажатии на теги с class="video" активируется плагин JS, который открывает видеоплеер на странице.

При нажатии на теги с class="video" активируется плагин JS, который открывает видеоплеер на странице.

При нажатии на теги с class="video" активируется плагин JS, который открывает видеоплеер на странице.

p>

Мой CSS выглядит так:

Код: Выделить всё

.projectThumb img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.projectThumb img:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.2)";
filter: alpha(opacity=0.2);
opacity: 0.2;
}

Когда вы наводите курсор на внутри (который занимает весь проектThumb), Непрозрачность уменьшается, обнажая текст, но изображение по-прежнему просачивается сквозь текст, поскольку изображение все еще находится поверх него. Есть ли способ изменить z-индекс одного из элементов, чтобы он не просачивался? Я попробовал добавить в CSS следующее:

Код: Выделить всё

.projectThumb a:hover {
z-index: -999;
}

Я также пробовал добавить z-index в .projectThumb img:hover вот так:

Код: Выделить всё

.projectThumb img:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.2)";
filter: alpha(opacity=0.2);
opacity: 0.2;
z-index: -999;
}

Ни то, ни другое не работает. Я могу вывести текст на передний план, установив z-index для .textContainer h1, .textContainer h2, .textContainer h3, который выводит текст на передний план, но я не знаю как вызвать это в projectThumb img:hover, чтобы оно было только поверх изображения при наведении. Мне также хотелось бы, чтобы весь оставался кликабельным, даже его текстовая часть. Когда я выношу текст на передний план с помощью z-index, текстовая область недоступна для кликов, поскольку она находится поверх .

Подробнее здесь: https://stackoverflow.com/questions/507 ... t-on-hover