CSS for the above: 

.gen_intros.fadeIn::before {
position: absolute;
content: ”;
width: 100%;
height: 100%;
top: 0;
left:0;
background-color: #e0c387;
background-size: cover;
z-index: 9;
animation: showTextR 0.96s ease 0.18s forwards;
will-change: clip-path;
}

.gen_intros.fadeIn::after {
position: absolute;
content: ”;
width: 100%;
height: 100%;
top: 0;
left:0;
background-color: #bfc9d1;
background-size: cover;
z-index: 8;
animation: showText 0.9s cubic-bezier(1,0,0,1) 0.9s forwards;
will-change: clip-path;
}

.gen_intros.gen_intros01.fadeIn::before {
background-image: url(https://templates.element.how/wp-content/uploads/2021/12/cropped-StockSnap_H7X6H0Q4IA.jpg);
}

.gen_intros.gen_intros01.fadeIn::after {
background-image: url(https://templates.element.how/wp-content/uploads/2021/12/Testimonial-2.png);
}
.gen_intros.gen_intros02.fadeIn::before {
background-image: url(https://templates.element.how/wp-content/uploads/2021/12/HomePage-ExploreWork.jpg);
}

.gen_intros.gen_intros02.fadeIn::after {
background-image: url(https://templates.element.how/wp-content/uploads/2021/12/HomePage-Services-MakeUp.jpg);
}

.gen_intros.gen_intros03.fadeIn::before {
background-image: url(https://templates.element.how/wp-content/uploads/2021/12/Paul-Ward-2.png);
}

.gen_intros.gen_intros03.fadeIn::after {
background-image: url(https://templates.element.how/wp-content/uploads/2021/12/Testimonial-pic-1.png);
}


@keyframes showText {
0% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
100% {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
}

@keyframes showTextR {
0% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
100% {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
}

@keyframes showTextY {
0% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
100% {
clip-path: polygon(100% 100%, 0 100%, 0 100%, 100% 100%);
}
}

@keyframes showTextYR {
0% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
100% {
clip-path: polygon(100% 0, 0 0, 0 0, 100% 0);
}
}