2

Primero muchas gracias por el trabajo que hacéis. No sabéis cuanto nos ayudáis a los que estamos empezando. Estoy intentando poner una capa sobrepuesta con el método :before encima de una imagen redonda y que quede ajustada perfectamente. Le pongo las mismas propiedades que a la imagen redonda pero por arriba sale un poco y no se a que es debido. Llevo un rato intentándolo y no se a que es debido.

introducir la descripción de la imagen aquí

El código html5 es este:

<div class="contenedor quienSoyGeneral">


        <div class="quienSoy">
            <img src="img/evento-cumpleaños.jpg" class="quienSoy__img" alt="icono privado">

        <section class="quienSoy__section">
                <h3 class="quienSoy__section-h3">mi misión</h3>
                <p class="quienSoy__section-p1">hacer que tu día sea inolvidable</p>
                <p class="quienSoy__section-p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus
                    accusamus aspernatur porro nobis neque! Magnam laboriosam, veniam illum corrupti in sint eaque,
                    non, quia totam corporis quis libero dolore provident.</p>
            </section>
        </div>

ESTE ES EL CÓDIGO DE CSS3:

    .quienSoyGeneral{
     padding: 20px 0;
     position: relative;
 }
 .quienSoy__section{
    padding: 20px 0;
 }
 .quienSoy:before{
     content:"";
    height: 225px;
    width: 250px;
    border-radius: 50%;
    background-size: 100% auto;  
    display: block;
    background-color: rgba(0,0,255,.2);
    z-index: 5000;
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left: 0;
    margin: 0 auto;

 }


 .quienSoy__img{
    height: 225px;
    width: 250px;
    background-position: 50%;
    border-radius: 50%;
    background-size: 100% auto;  
    display: block;
    margin: 0 auto;

 }

Muchísimas gracias.

1 respuesta 1

3

Las dimensiones las tienes que poner en el contenedor que tiene la imagen. Y hacer que la imagen ocupe el 100% del contenedor padre. Si indicas las dimensiones en el contenedor padre así el ::before se dimensionará según el padre.

.quienSoyGeneral {
  padding: 20px 0;
  position: relative;
}

.quienSoy__section {
  padding: 20px 0;
}

.quienSoy {
  height: 225px;
  width: 250px;
  background-position: 50%;
  border-radius: 50%;
  background-size: 100% auto;
  display: block;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.quienSoy:before {
  content: "";
  height: 100%;
  width: 100%;
  border-radius: 50%;
  display: block;
  background-color: rgba(0, 0, 255, .2);
  z-index: 5000;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
}


.quienSoy__img {
  height: 100%;
  width: 100%;
}
<div class="contenedor quienSoyGeneral">


  <div class="quienSoy">
    <img src="https://images.unsplash.com/photo-1591653979218-8105a74a4d55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="quienSoy__img" alt="icono privado">

    <section class="quienSoy__section">
      <h3 class="quienSoy__section-h3">mi misión</h3>
      <p class="quienSoy__section-p1">hacer que tu día sea inolvidable</p>
      <p class="quienSoy__section-p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus
        accusamus aspernatur porro nobis neque! Magnam laboriosam, veniam illum corrupti in sint eaque,
        non, quia totam corporis quis libero dolore provident.</p>
    </section>
  </div>
  </div>

2
  • Gracias. ¿Aquí está bien no? Soy un poco novato jeje
    – Nacho
    el 10 jun. 2020 a las 17:28
  • 1
    @Nacho ¿Esta respuesta solucionó tu problema? Por favor no olvides marcarla como aceptada si tu problema fue resuelto. Puedes hacerlo marcando el ✓ en la parte izquierda de la respuesta (se pondrá verde, ganarás 2 puntos de reputación y podrías acceder a nuevos privilegios). ¡Mira ¿Qué debo hacer cuando alguien contesta mi pregunta? si tienes alguna duda!
    – Marcos
    el 10 jun. 2020 a las 17:59

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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