sucede que quiero colocar opacidad a unas imágenes de un slider y no he podido, aquí les muestro como lo tengo.
Y quiero que quede algo así:
Según tengo entendido se utliza el Pseudo-elemento ::before, pero no me funciona, la imagen donde está la opacidad si me resulta ya que utilizo unas clases propias de Bootstrap para los div, pero, como este es un slider no funciona igual, ayudaa!!! Gracias
Este es el código html que utilizo:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/img/demo/7.jpg" class="d-block w-100 overlay overlay-blue" alt="...">
<div class="carousel-caption">
<h5>COMUNIDAD DE PAZ </h5>
</div>
</div>
<div class="carousel-item">
<img src="assets/img/demo/9.jpg" class="d-block w-100 overlay overlay-blue" alt="...">
<div class="carousel-caption">
<h5>IMPUNIDAD</h5>
</div>
</div>
<div class="carousel-item">
<img src="assets/img/demo/5.jpg" class="d-block w-100 overlay overlay-blue" alt="...">
<div class="carousel-caption">
<h5>NUESTRO TRABAJO</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Y el CSS:
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
background-size: cover;
}
.carousel-caption {
bottom: 243px;
}
@media (max-width: 768px) {
.carousel-caption h5 {
font-size: 28px!important;
}
}
.carousel-caption h5 {
font-size: 3.5rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 2px;
}