JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page1-box">
    <section class="page1">
        <div class="page-bg"></div>
        <div class="page_container">
            <div class="text">sample text here</div>
        </div>
    </section>
</div>

CSS

.page1-box {
    margin: 30px auto;
    width: 300px;
    height:100px;
    overflow:hidden;
}
.page1 {
    width: 100%;
    height: 100%;
    position: relative;
}
.page-bg {
    width: 100%;
    height: 100%;
    background: url('https://pbs.twimg.com/media/B6mjgHuCIAEgyli.jpg');
    background-position:center center;
    background-size:cover;
    transform:scale(1);
    transition:all 5s ease-in;
    z-index: -1;
    position: absolute;
}
.page-bg.zout {
    transform:scale(1.3);
}
.page_container {
    color: #fff;
    text-align: center;
    z-index: 1;
}

JavaScript

setTimeout(function () {
    $('.page-bg').addClass('zout');
}, 100);