6

El problema es que la imagen se baja unos pixeles de donde deberia de estar, es decir la franja superior roja NO deberia de verse.

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>

La parte mas especifica es:

  .front > img{
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 25px 25px 25px 25px;
  }

Alguien sabe como solucionar este problema?

2
  • El error no esta dento de .front > img {, al parecer esta por .card > .front, .card > .back { y en border-radius: 25px 25px 25px 25px; puede usarlo asi: border-radius: 1rem;
    – user101604
    Commented el 4 ene. 2020 a las 2:04
  • @Sebastian, pues el resultado es el mismo con el cambio que me indicas.
    – Shassain
    Commented el 4 ene. 2020 a las 2:08

1 respuesta 1

6

Fijate si asi esta bien?

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;
            padding: 0;
          }
          .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;
            padding: 0;
          }
          .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>

ACTUALIZADO

Lo que hice fue agregar un padding: 0; sobre las clases .card > .front, .card > .back y .front > img{ que tu habias nombrado!

      .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; // tambien puede usarlo asi
        background:red;
        padding: 0; //padding 0
      }

      .front > img{
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 25px; // tambien puede usarlo asi
        padding: 0; //padding 0
      }
2
  • Pues se ve bien, podrias especificar que es lo que cambiaste?
    – Shassain
    Commented el 4 ene. 2020 a las 2:17
  • Ya esta actualizado!
    – user101604
    Commented el 4 ene. 2020 a las 2:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.