T Capital

Hero 

<section class="hero bm-animate">
    <div class="overlay"></div>
    <div class="image-wrapper">
        <img alt="Providing more than capital" src="/images/bitmap/main-hero.jpg" />
    </div>
    <div class="container-xxl h-100 d-flex align-items-center justify-content-center">
        <h1 class="text-uppercase text-center text-white">Providing more than capital</h1>
    </div>
</section>
 
<section class="hero bm-animate">
    <div class="overlay"></div>
    {{#if image}}
        <div class="image-wrapper">
            <img alt="{{ heading }}" src="{{ image }}"/>
        </div>
    {{/if}}
    <div class="container-xxl h-100 d-flex align-items-center justify-content-center">
        <h1 class="text-uppercase text-center text-white">{{ heading }}</h1>
    </div>
</section>
 
{
  "heading": "Providing more than capital",
  "image": "/images/bitmap/main-hero.jpg"
}
  • Content: 
    //  hero

section{
    &.hero{
        height: 100vh;
        position: relative;
        .overlay{
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.85) 100%);
            height: 100px;
            width: 100%;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
        }
        .image-wrapper{
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: all 0.8s;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }
        .container-xxl{
            position: relative; 
            z-index: 3;
        }
        h1{
            text-shadow: 0 0 33px #000;
            transform: scale(0.4);
            opacity: 0;
            transition: all 1.2s;
        }
        &.bm-animated{
            h1{
                transform: scale(1);
                opacity: 1;
            }
            .image-wrapper{
                opacity: 1;
            }
        }
    }
}
  • URL: /components/raw/hero/hero.scss
  • Filesystem Path: src/components/02-components/hero/hero.scss
  • Size: 1.2 KB

No notes defined.