1

Quiero lograr el efecto de card y background. Donde el background quede aproximadamente a mitad de la card. Ejemplo:

introducir la descripción de la imagen aquí

El código HTML que tengo hasta el momento es este

<section class="seccion2">
  <div class="container pt-5">
    <div class="col-lg-12">
        <div class="card mb-3" style="max-width: 540px; ">
          <div class="row g-0">
            <div class="col-md-8">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
            <div class="col-md-4">
              <img src="..." class="img-fluid rounded-start" alt="...">
            </div>
          </div>
        </div>

        <div class="text-center">
          <p>Este es un titulo corto muestral</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime pariatur earum, nesciunt veniam velit doloremque repudiandae, voluptatum culpa dolorum corporis a illum molestiae eos ducimus mollitia. Soluta qui mollitia odio!</p>
          <div class="row">
            <div class="col-lg-4">
              <p>Titulo simple</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo eius corrupti repudiandae rem maiores accusamus ut quod quibusdam earum officia rerum vitae incidunt aspernatur, pariatur dolorem sed quam minus.</p>
            </div>
            <div class="col-lg-4">
              <p>Titulo simple</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo eius corrupti repudiandae rem maiores accusamus ut quod quibusdam earum officia rerum vitae incidunt aspernatur, pariatur dolorem sed quam minus.</p>
            </div>    <div class="col-lg-4">
              <p>Titulo simple</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illo eius corrupti repudiandae rem maiores accusamus ut quod quibusdam earum officia rerum vitae incidunt aspernatur, pariatur dolorem sed quam minus.</p>
            </div>
          </div>
        </div>
    </div>
  </div>
</section>

No tengo problemas con la estructura de la card ni con el contenido. El problema es que no consigo lograr el efecto. El CSS con el que he intentado resolverlo

.seccion2{
background: linear-gradient(180deg,transparent 50%, rgb(10, 10, 10) 50%);
}

Podría incluir cualquier lenguaje que me pueda dar como resultado este efecto, siempre y cuando pueda aplicarlo en un sitio creado en php. Gracias

Así está actualmente 2

2
  • 2
    Si publicaras todo tu css podría ayudarte, no es complicado, con un translateY(-50%) debería resolverse todo fácil.
    – Jaime
    Commented el 12 sept. 2021 a las 20:03
  • Gracias @JaimeMenéndezÁlvarez , si efectivamente esto lo resolvió.
    – Lilibeth
    Commented el 13 sept. 2021 a las 18:41

1 respuesta 1

0

creo que no entendi bien, estas intenando hacer que a la mitad del card tenga otro color. Si es haci es de esta manera

div#card{
    background: linear-gradient(180deg,white 50%,transparent 50%);
}

Para el texto solo busca los que están más abajo del la parte blanca y cambiarlas de color.

Si no es el resultado que deseabas avisáme.

0

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.