Hovering over grid items does not display the image - html

Question

<div id="grid">
<div class="grid-items">
<img src="./images/desktop/image-deep-earth.jpg" alt="" />
<h4 class="grid-items-heading">Deep earth</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-night-arcade.jpg" alt="" />
<h4 class="grid-items-heading">night arcade</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-soccer-team.jpg" alt="" />
<h4 class="grid-items-heading">soccor team vr</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-grid.jpg" alt="" />
<h4 class="grid-items-heading">the grid</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-from-above.jpg" alt="" />
<h4 class="grid-items-heading">from up above vr</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-pocket-borealis.jpg" alt="" />
<h4 class="grid-items-heading">pokect borealis</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-curiosity.jpg" alt="" />
<h4 class="grid-items-heading">the curiosity</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-fisheye.jpg" alt="" />
<h4 class="grid-items-heading">Make it fisheye</h4>
</div>
</div>
#grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
place-items: center;
row-gap: 2.5rem;
}
.grid-items {
position: relative;
cursor: pointer;
}
.grid-items-heading {
position: absolute;
bottom: 25px;
padding: 0 2rem;
color: var(--white);
font-size: 1.5rem;
width: 74%;
margin: 0;
z-index: 100;
}
.grid-items::after {
content : "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.1);
}
.grid-items:hover .grid-items::after {
background-color: rgba(255, 255, 255, 0.5);
z-index : 80;
}
I am creating a grid that contains 8 elements each element has 2 items one is an image and one is a heading.
I have given a position relative to grid-items class and position absolute to heading to place it at the bottom of that particular gid item. So then I have created a after element of grid items and which I like a overlay its like a fade black color over a grid item and I want to change its color whenever I hover over grid-item which is not working. The whole after element is not working

Answer 1

use .grid-items:hover:after to work.
#grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
place-items: center;
row-gap: 2.5rem;
}
img{
width:200px;
height:200px;
}
.grid-items {
position: relative;
cursor: pointer;
border: 2px solid red;
}
.grid-items-heading {
position: absolute;
bottom: 25px;
padding: 0 2rem;
color: var(--white);
font-size: 1.5rem;
width: 74%;
margin: 0;
z-index: 100;
}
.grid-items::after {
content : "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,230,0,0.1);
}
.grid-items:hover:after{
background-color: rgba(255, 120, 255, 0.5);
z-index : 80;
}
<div id="grid">
<div class="grid-items">
<h4 class="grid-items-heading">Deep earth</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-night-arcade.jpg" alt="" />
<h4 class="grid-items-heading">night arcade</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-soccer-team.jpg" alt="" />
<h4 class="grid-items-heading">soccor team vr</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-grid.jpg" alt="" />
<h4 class="grid-items-heading">the grid</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-from-above.jpg" alt="" />
<h4 class="grid-items-heading">from up above vr</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-pocket-borealis.jpg" alt="" />
<h4 class="grid-items-heading">pokect borealis</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-curiosity.jpg" alt="" />
<h4 class="grid-items-heading">the curiosity</h4>
</div>
<div class="grid-items">
<img src="./images/desktop/image-fisheye.jpg" alt="" />
<h4 class="grid-items-heading">Make it fisheye</h4>
</div>
</div>

Answer 2

You just need a comma between your hover and after class.
.grid-items:hover, .grid-items::after {
background-color: rgba(255, 255, 255, 0.5);
z-index : 80;
}