En algunos casos existen imágenes con colores que no se pueden adaptar al color del texto una de las primeras opciones es aplicarle una capa oscura con un color transparente.
El problema de aplicarle una capa oscura a la imagen es que el contenido del texto también cambia su color a un color oscuro.
Mi segundo error es la capa tratando de aplicar al parecer no esta funcionado correctamente.
.animation::after {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1);
width: 100%;
z-index: 10;
}
¿Cómo añado correctamente una capa oscura sin que afecte el texto del contenido?
.item {
width: 100%;
height: 656px !important;
background-size: cover;
background-position: 50% 0;
background-repeat: no-repeat;
}
.animation {
display: block;
height: auto;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.animation::after {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1);
width: 100%;
z-index: 10;
}
.out-about {
text-align: center;
margin: 0 auto;
}
.out-about h1 {
font-size: 35px;
color: #97D302;
font-weight: 100;
}
.out-about h2 {
font-size: 35px;
padding-top: 30px;
padding-bottom: 10px;
color: #95a5a6;
font-weight: 100;
}
.LightGrey {
color: #ccc;
}
.TanDark {
color: #c59e6f;
}
<div class="item" style="background-image: url('https://s3-us-west-2.amazonaws.com/devcode/img/fondo/fondo.jpg');">
<div class="container">
<div class="row">
<div class="animation">
<div class="out-about slideInUp">
<h3 class="TanDark">"Lorem ipsum dolor sit amet, ius minim gubergren ad."</h3>
</div>
<div class="out-about">
<p class="LightGrey">Lorem ipsum dolor sit amet, vix erat audiam ei. Cum doctus civibus efficiantur in. Nec id tempor imperdiet deterruisset, doctus volumus explicari qui ex.</p>
</div>
</div>
</div>
</div>
</div>