I have the following issue.
This is my html code:
<div className="search_artist ">
<p className="search_artist__heading">Find a band/artist</p>
<div className="form-group">
<input type="text" class="form-control" id="usr"/><button className="btn"onClick={this.searchArtists}>Search</button>
</div>
</div>
This is my SCSS:
.search_artist {
margin: 44px auto;
width: 908px;
border-radius: 10px;
opacity: 0.15;
position: relative;
}
.search_artist > * {
position: relative;
z-index: 100;
}
.search_artist__heading {
text-align: left;
font-size: 2rem;
color: white;
}
Im trying to put all children elements under search_artist
to be on top of the div so that the opacity doesn't affect them.
Can I please get any input as to where I'm going wrong?