The problem is that the image is lowered a few pixels from where it should be, that is, the upper red stripe should NOT be seen.
body {
margin: 0;
padding: 0;
font-family: 'Abel', sans-serif;
background: #DDDFE2; }
section {
background: 100%;
height: 400px; }
.main_bus {
background-size: 30%;
position: relative; }
.main_bus .layout_center {
position: absolute;
top: 85px;
left: 80px;
width: calc(100% - (70px + 70px)); }
.flex_content {
display: flex; }
.flex_column {
flex: 1;
display: flex;
flex-direction: column;
padding: .4em; }
.flex_column img {
padding-top: .4em; }
.flex_column div {
padding-top: .4em; }
.height_250px{
height: 250px;
}
.height_350px{
height: 350px;
}
.height_270px{
height: 270px;
}
.height_450px{
height: 450px;
}
.height_300px{
height: 300px;
}
.height_560px{
height: 560px;
}
.card{
background: transparent;
position: relative;
border-radius: 25px 25px 25px 25px;
}
.card > .front,
.card > .back {
box-sizing: border-box;
position: absolute;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 1s;
transition-property: transform, opacity;
border-radius: 25px 25px 25px 25px;
background:red;
}
.front{
top:0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
}
.front > img{
width: 100%;
height: 100%;
display: block;
border-radius: 25px 25px 25px 25px;
}
.back{
background: #fcfabc;
top:0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: rotateY(-180deg);
}
.card:hover > .front {
transform: rotateY(180deg);
opacity: 0;
}
.card:hover > .back {
opacity: 1;
transform: rotateY(0deg);
}<section class="main_bus" id="inicio">
<div class="layout_center">
<div class="flex_content">
<div class="flex_column">
<div>
<div class="card height_560px">
<div class="front">
<img src="https://i.pinimg.com/564x/9a/a9/f0/9aa9f0235a64eb5f123402efcacb5197.jpg" alt="">
</div>
<div class="back">
atras
</div>
</div>
</div>
<div>
<div class="card height_270px">
<div class="front">
<img src="https://i.pinimg.com/564x/fa/84/09/fa840965a10cb0c28410d06e5087978a.jpg" alt="">
</div>
<div class="back">
atras
</div>
</div>
</div>
<div>
<div class="card height_250px">
<div class="front">
<img src="https://i.pinimg.com/564x/e9/2b/c3/e92bc328087ee008adf4eee9411e8a4c.jpg" alt="">
</div>
<div class="back">
atras
</div>
</div>
</div>
<div>
<div class="card height_300px">
<div class="front">
<img src="https://i.pinimg.com/564x/93/8f/56/938f564ca79e20fe54cb42df44b1c150.jpg" alt="">
</div>
<div class="back">
atras
</div>
</div>
</div>
</div>
<div class="flex_column">
<div>
<div class="card height_250px">
<div class="front">
<img src="https://i.pinimg.com/564x/6c/61/d2/6c61d2afbe1551435f2e858365465cbd.jpg" alt="">
</div>
<div class="back">
atras
</div>
</div>
</div>
<div>
<div class="card height_350px">
<div class="front">
<img src="https://i.pinimg.com/564x/8c/fa/06/8cfa06657b77435e91c3466f15319ebb.jpg" alt="">
</div>
<div class="back">
atras
</div>
</div>
</div>
<div>
<div class="card height_450px">
<div class="front">
<img src="https://i.pinimg.com/564x/3a/a8/51/3aa8513f2d9fde7a97e83a891aa64a73.jpg" alt="">
</div>
<div class="back">
atras
</div>
</div>
</div>
<div>
<div class="card height_270px">
<div class="front">
<img src="https://i.pinimg.com/564x/ed/00/75/ed0075587fdeeed877c0aab2a23572c5.jpg" alt="">
</div>
<div class="back">
atras
</div>
</div>
</div>
</div>
</div>
</div>
</section>The most specific part is:
.front > img{
width: 100%;
height: 100%;
display: block;
border-radius: 25px 25px 25px 25px;
}
Does someone know how to solve this problem?
Check if this is ok?
UPDATED
What I did was add an
padding: 0;over the classes.card > .front, .card > .backand.front > img{that you had named!