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.
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.