Flip Box Hover с изображением в качестве фона ⇐ Html

[Anonymous]

Я использую флип -коробку с передним и задним содержанием, когда я нахожусь (Rotatey (180Deg)). Это сработало для простого контейнера (только текст), но не работал, когда фон был изображением. Это мой первый раз, когда я использую элемент nth-ребенка, поэтому любые советы приветствуются ^^.
(это небольшая экрана на данный момент)
и заранее благодаря. Lang-CSS PrettyPrint-Override ">

Код: Выделить всё

/*
===============
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;
}< /code>
    



SERVICES
Lorem ipsum dolor, sit amet consectetur adipisicing elit.


[i][/i]
Web Design

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?





[i][/i]
Front Dev

Front Dev

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit
optio, eum esse doloremque molestias aspernatur.





[i][/i]
Branding

Branding

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consequuntur, error.

Подробнее здесь: https://stackoverflow.com/questions/700 ... background