Fancy up your banner image hero sections using overlay gradients

Fancy up your banner image hero sections using overlay gradients Demo

View Demo Full Screen View Demo New Tab

Fancy up your banner image hero sections using overlay gradients Code

HTML

<div class="banner">
	<div class="banner-heading">Banner Heading</div>
	<div class="banner-sub-heading">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  <div class="kruxor"><a href="https://kruxor.com/" target="_blank">@kruxor</a></div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
* {
	font-family:"Poppins", sans-serif;  
}
.banner-heading {
    font-size: 44px;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    text-shadow: 0px 1px 0px #000;
}
.banner-sub-heading {
  color:#EEE;
	position:relative;
	z-index: 100;
}
.banner {
	position:relative;
  min-height:400px;
    display: flex;
    justify-content: center;  
    align-items: center; 
  flex-direction: column;
  background:url(https://picsum.photos/1200/400?random=12345) center no-repeat;
  background-size:cover;
}
.banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, pink, green);
    opacity: .7;
    z-index: 1;
}
.banner > *,.banner div {
    position:relative;
}
.banner-heading {
	z-index: 100;
}
.meta-bar-wrap {
    background: rgba(62, 77, 96, 0.78);
    margin-top: -50px;
    margin-bottom: 80px;
    z-index: 5;
    position: relative;
}
.kruxor,.kruxor a {
  margin-top:10px;
  font-weight:bold;
  color:purple;
	z-index: 100;
}