Flip box hover with image as background - html

Question

im using a flip box with a front and back content when i hover (rotateY(180deg)) . that worked for simple container (only text) but didn't work when the background was an image this is my first time using nth-child element so any advises are welcome^^.
(its a small screen version for now)
and thanks in advance.
/*
===============
SERVICES
===============
*/
.title-service {
margin-top: 100px;
text-align: center;
}
.title-service p {
margin-top: -30px;
}
.container-service {
width: 70vh;
height: 50vh;
margin-left: 30px;
background: grey;
margin-bottom: 10px;
align-items: center;
text-align: center;
padding-top: 25%;
transform-style: preserve-3d;
transition: 0.3s ease all;
}
.container-service:hover {
transform: rotateY(180deg);
}
.front-card {
backface-visibility: hidden;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.back-card {
backface-visibility: hidden;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
transform: rotateY(180deg);
}
.container-service h3 {
color: black;
font-size: 26px;
font-weight: 700;
}
.container-service i {
font-size: 40px;
color: black;
}
.container-service:nth-child(3) {
background-image: url(../Responsive\ Website/img-2.jpg);
background-size: cover;
position: relative;
}
.container-service:nth-child(3) .front-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
.dev h3 {
color: whitesmoke;
}
.dev i {
color: whitesmoke;
}
<!-- START SERVICES -->
<section class="service">
<div class="info-service">
<div class="title-service">
<h1>SERVICES</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</div>
<div class="container-service web">
<div class="front-card">
<span><i class="fas fa-palette"></i></span>
<h3>Web Design</h3>
</div>
<div class="back-card">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero
maxime, reiciendis, ut earum amet architecto, cum magni cumque eum
repudiandae a minus sunt! Sed porro expedita, fuga aspernatur
molestiae iste ab cupiditate repudiandae cumque officia ea.
Tenetur amet ullam voluptatum?
</p>
</div>
</div>
<div class="container-service f-e">
<div class="dev">
<div class="front-card">
<span><i class="fas fa-laptop-code"></i></span>
<h3>Front Dev</h3>
</div>
<div class="back-card">
<h3>Front Dev</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit
optio, eum esse doloremque molestias aspernatur.
</p>
</div>
</div>
</div>
<div class="container-service branding">
<div class="front-card">
<span><i class="fas fa-building"></i></span>
<h3>Branding</h3>
</div>
<div class="back-card">
<h3>Branding</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consequuntur, error.
</p>
</div>
</div>
</div>
</section>
<!-- END SERVICES -->

Answer 1

The front and back are stacked above the parent wrapper and have inherited the parent background color, try applying the image to the front card of the third child.