This innovative CSS-only method utilizes keyframe animation to achieve a stunning effect. By determining the duration of the initial animation (I opted for a fade-in effect as an example), you can use that timing as a delay to gradually reveal the background. It's important to apply the background image on a pseudo-element so that lowering the opacity doesn't render everything inside the element invisible, including its child elements like .title and .role.
.home-header,
.project-type {
width: 200px;
text-align: center;
color: white;
background-color: darkred;
margin: 1rem auto;
padding: 1rem;
-webkit-animation: fadein 2s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s;
/* Firefox < 16 */
-ms-animation: fadein 2s;
/* Internet Explorer */
-o-animation: fadein 2s;
/* Opera < 12.1 */
animation: fadein 2s;
}
.box.bg {
padding: 2px;
position: relative;
}
.box.bg::after {
content: "";
opacity: 0;
background-color: lightgreen;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
/* Delay until after the block animations */
-webkit-animation: fadein 2s ease 2s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s ease 2s;
/* Firefox < 16 */
-ms-animation: fadein 2s ease 2s;
/* Internet Explorer */
-o-animation: fadein 2s ease 2s;
/* Opera < 12.1 */
animation: fadein 2s ease 2s;
}
# Based on https: //stackoverflow.com/a/11681331/5015356
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<section id="banner">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="box bg">
<!-- Start of intro animation container --->
<div class="title">
<!-- Start of main heading --->
<span class="block"></span>
<h1 class="home-header second-header">WORN WAX<span class="dot2">.</span></h1>
</div>
<!-- End of main heading --->
<div class="role">
<!-- Start of sub heading --->
<div class="block2"></div>
<p class="role-text project-type">WEBSITE BUILD / APP DESIGNS</p>
</div>
<!-- End of sub heading --->
</div>
<!-- End of intro animation container --->
</div>
</div>
</div>
</section>