Jarallax

Adds a semi-transparent overlay over an element.

Plugin Documentation

Usage

JS

copy

<script src="assets/libs/jarallax/dist/jarallax.min.js"></script>

CSS

copy

<script src="assets/libs/jarallax/dist/jarallax.css"></script>

Examples

  1. Background Image

    Free Demo Account

    The most ideal route for newbies to investigate exchanging.

    Open An Account
    copy
    
<div class="jarallax px-4 py-6 px-sm-6 py-sm-9 rounded overlay overlay-black overlay-70" data-speed="1">
    <div class="jarallax-img bg-cover" style="background-image: url(../html/assets/img/banner/bg-3.jpg);"></div>
    <div class="row align-items-center z-index-9">
        <div class="col-lg-9 mb-4 mb-lg-0">
            <h2 class="mb-2 text-white">Free Demo Account</h2>
            <p class="mb-0 lead text-white-90">The most ideal route for newbies to investigate exchanging.</p>
        </div>
        <div class="col-lg-3">
            <div class="text-lg-end">
                <a href="#" class="btn btn-light">Open An Account</a>
            </div>
        </div>
    </div>
</div>
    You can change the black overlay to primary overlay with replacing class overlay-black to overlay-primary and also you can change the overlay opacity as well with change class overlay-70.
Summary