Gallery Grid
Component #1
<!-- Samples Section -->
<div class="space-2">
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll bg-white" data-options='{direction: "reverse"}' style="overflow: visible;">
<div class="container-fluid px-lg-9">
<div class="row justify-content-md-center align-items-center mx-n2">
<div class="d-none d-md-inline-block col-md px-2">
<img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/407x472/img6.jpg" alt="Image Description">
<img class="img-fluid shadow rounded" src="../../assets/img/407x115/img1.jpg" alt="Image Description">
</div>
<div class="col-3 col-md px-2" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"7", mid:"0", final:"-7"}]'>
<img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/407x472/img4.jpg" alt="Image Description">
<img class="img-fluid shadow rounded" src="../../assets/img/407x283/img1.jpg" alt="Image Description">
</div>
<div class="col-6 col-md px-2">
<img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/407x472/img5.jpg" alt="Image Description">
<img class="img-fluid shadow rounded" src="../../assets/img/407x472/img3.jpg" alt="Image Description">
</div>
<div class="col-3 col-md px-2" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"-7", mid:"0", final:"7"}]'>
<img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/300x360/img1.jpg" alt="Image Description">
<img class="img-fluid shadow rounded" src="../../assets/img/407x535/img1.jpg" alt="Image Description">
</div>
<div class="d-none d-md-inline-block col-md px-2">
<img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/407x472/img1.jpg" alt="Image Description">
<img class="img-fluid shadow rounded" src="../../assets/img/407x472/img2.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
</div>
<!-- End Samples Section -->
<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
Component #2
<!-- Gallery Section -->
<div class="container space-2">
<div class="row">
<div class="col-md-5 align-self-md-end mb-3 mb-md-0">
<img class="img-fluid rounded" src="../../assets/img/750x750/img6.jpg" alt="Image Description">
</div>
<div class="col-md-7">
<div class="ml-lg-4">
<img class="img-fluid rounded" src="../../assets/img/750x750/img5.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
<!-- End Gallery Section -->