Как сделать корректный overlay?

Question

[Gleb Zubov]

Есть такой код
HTML

<div class="grid-parti grid">
     <div class="grid-parti1 grid" style="background-image: url(img/prf/1.jpg);">item 1</div>
     <div class="grid-parti1 grid" style="background-image: url(img/prf/2.jpg);">item 2</div>
     <div class="grid-parti1 grid" style="background-image: url(img/prf/3.jpg);">item 3</div>
     <div class="grid-parti1 grid" style="background-image: url(img/prf/4.jpg);">item 4</div>
     <div class="grid-parti1 grid" style="background-image: url(img/prf/5.jpg);">item 5</div>
     <div class="grid-parti1 grid" style="background-image: url(img/prf/6.jpg);">item 6</div>
     <div class="grid-parti1 grid" style="background-image: url(img/prf/7.jpg);">item 7</div>
     <div class="grid-parti1 grid" style="background-image: url(img/prf/8.jpg);">item 8</div>
     <div class="grid-parti1 grid" style="background-image: url(img/prf/9.jpg);">item 9</div>
    </div>

CSS

.grid{
	display: grid;
}
.grid-parti{
padding: 10px;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}

.grid-parti1{
	z-index: 1;
	min-height: 32vh;
	color: white;
	background-position: center;
	background-size: cover;
	align-content: center;
	text-align: center;
	padding: 10px;
	position: relative;
	transition: .5s ease;
	cursor: pointer;

}   
.grid-parti1:hover{
		z-index: 1;
	color: #3fbaeb;
}
.grid-parti1:before{
		z-index: 2;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(94, 91, 96, 0.65);
}

Проблема номер один. У меня overlay идет поверх всего css и по какой то причине(моей кривобокости)z-index:1; не помогает(либо я криво его вставляю)
Проблема номер один. Я не знаю как сделать hover для before.
Заранее всем спасибо!

Answer 1

[Андрей Федоров]

1. z-index работает только для элементов, у которых задан position.
2. просто перечисляете псевдоселекторы .grid-parti1:before:hover {}

UPD: к сожалению пункт №2 работать не будет, проверено на модельном коде. Тема на SO

Answer 2

[Andrej Sharapov]

1. добавьте position: absolute к z-index
2. .grid-parti1:before:hover