Hovering over grid items does not display the image-CodePudding

<div id="grid">
      <div >
        <img src="./images/desktop/image-deep-earth.jpg" alt="" />
        <h4 >Deep earth</h4>
      </div>
      <div >
        <img src="./images/desktop/image-night-arcade.jpg" alt="" />
        <h4 >night arcade</h4>
      </div>
      <div >
        <img src="./images/desktop/image-soccer-team.jpg" alt="" />
        <h4 >soccor team vr</h4>
      </div>
      <div >
        <img src="./images/desktop/image-grid.jpg" alt="" />
        <h4 >the grid</h4>
      </div>
      <div >
        <img src="./images/desktop/image-from-above.jpg" alt="" />
        <h4 >from up above vr</h4>
      </div>
      <div >
        <img src="./images/desktop/image-pocket-borealis.jpg" alt="" />
        <h4 >pokect borealis</h4>
      </div>
      <div >
        <img src="./images/desktop/image-curiosity.jpg" alt="" />
        <h4 >the curiosity</h4>
      </div>
      <div >
        <img src="./images/desktop/image-fisheye.jpg" alt="" />
        <h4 >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

CodePudding user response：

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 >
        <h4 >Deep earth</h4>
      </div>
      <div >
        <img src="./images/desktop/image-night-arcade.jpg" alt="" />
        <h4 >night arcade</h4>
      </div>
      <div >
        <img src="./images/desktop/image-soccer-team.jpg" alt="" />
        <h4 >soccor team vr</h4>
      </div>
      <div >
        <img src="./images/desktop/image-grid.jpg" alt="" />
        <h4 >the grid</h4>
      </div>
      <div >
        <img src="./images/desktop/image-from-above.jpg" alt="" />
        <h4 >from up above vr</h4>
      </div>
      <div >
        <img src="./images/desktop/image-pocket-borealis.jpg" alt="" />
        <h4 >pokect borealis</h4>
      </div>
      <div >
        <img src="./images/desktop/image-curiosity.jpg" alt="" />
        <h4 >the curiosity</h4>
      </div>
      <div >
        <img src="./images/desktop/image-fisheye.jpg" alt="" />
        <h4 >Make it fisheye</h4>
      </div>
    </div>

CodePudding user response：

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;
}