CSS Backgrounds
Posted in
2901
12:09 am, May 25, 2022
Fancy up your banner image hero sections using overlay gradients
What is banner image hero sections using overlay gradients?
In this code i show how you can add elements to your existing banner images to add an overlay gradient, while still leaving the inner content of the banner the same.
By using the :after elements and changing the indexes of the content you can add a n overlay, while still allowing the foreground elements to be viewable.
Preview
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;
}
External Link for Fancy up your banner image hero sections using overlay gradients
Related Tags
Add Comment
Other Items in CSS Backgrounds
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript