After successfully implementing a gradient effect on an image, I am facing the issue of it covering my text as well. I am struggling to locate the part of the code that needs to be modified in order to prevent the text from being obscured by the gradient effect. Can someone please offer an explanation or provide links to helpful resources for me to reference?
Thank you!
<div class="page-header header-filter">
<div class="container">
<div class="row">
<div class="col-md-8 ml-auto mr-auto">
<div class="brand">
<h1> Some smart text </h1>
<h3 class="title"> Start the Development With A Badass Bootstrap 4 UI Kit inspired by Material Design. </h3>
</div>
</div>
</div>
</div>
</div>
.page-header {
height: 100vh;
color: #fff;
background-position: 50%;
background-size: cover;
background-image: url(../img/ggg.jpg);
display: flex;
align-items: center;
}
.brand {
text-align: center;
}
.header-filter::after {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
display: block;
left: 0;
top: 0;
content: "";
}
.header-filter::after {
background: rgba(132,13,121,.88);
background: linear-gradient(45deg,rgba(132,13,121,.88),rgba(208,44,180,.31));
background: -webkit-linear-gradient(135deg,rgba(132,13,121,.88),rgba(208,44,180,.31));
}