Hover effect on pseudo element doesn't work

Question

I want to give a hover effect on my flex elements, that would slide down a black "curtain" but for some reason the ::after element is not created, thus the hover doesn't work. What am I doing wrong with creating ::after element?

.flex-element {
  flex: 1 0 20%;
  margin-right: 10rem;
  z-index: 1;
  width: 20rem;
  position: relative;
  &:last-child {
    margin-right: 0;
  }
  &:hover {
    cursor: pointer;
  }
  &::after {
    content: "";
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 0%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.712);
    z-index: 2;
  }
  &:hover:after {
    animation: .5s rollDown ease-in-out forwards;
  }
}

@keyframes rollDown {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

<div id="categories" class="container">
  <div class="headline">
    <h1>Categories</h1>
  </div>
  <div class="flex">
    <img class="flex-element" src="images/img1.png ">
    <img class="flex-element" src="images/img2.png">
    <img class="flex-element" src="images/img3.png">
  </div>
</div>

Answer 1

As far as I understand your requirement, you can achieve it as follow.

.flex{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.flex-element {
	margin-right: 30px;
	z-index: 1;
	position: relative;
}
.flex-element:hover {
	cursor: pointer;
}
.flex-element:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 0;
	width: 100%;
	background-color: #000;
	z-index: 0;
	opacity: 0.5;
	transition: 0.3s ease-in-out all;
	-webkit-transition: 0.3s ease-in-out all;
	-moz-transition: 0.3s ease-in-out all;
	-ms-transition: 0.3s ease-in-out all;
}
.flex-element:hover:before{
	height: 100%;
}

<div id="categories" class="container">
	<div class="headline">
		<h1>Categories</h1>
	</div>
	<div class="flex">
		<div class="flex-element"><img src="https://dummyimage.com/300"></div>
		<div class="flex-element"><img src="https://dummyimage.com/300"></div>
		<div class="flex-element"><img src="https://dummyimage.com/300"></div>
	</div>
</div>