Can anyone help me with this issue:
Check out this animated GIF
The images in my project are overlapping when scrolling!
How can I achieve a similar effect for my images?
Is there a tutorial or plugin available for this?
Here is the current code snippets (HTML and CSS):
.gallery-img-parent {
max-height: 200px;
padding-top: 32px;
position: relative;
}
.gallery-img-double {
width: 100%;
max-height: 84px !important;
}
.gallery-double-child {
position: relative;
}
.gallery-img-parent > a, .gallery-img-parent > .gallery-double {
padding: 0 !important;
}
.gallery-img {
width: 100%;
height: 100%;
}
.gallery-img, .gallery-img-double {
object-fit: cover;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="menu-parent container-fluid">
<div class="row">
<div class="col-12">
<div class="container gallery-container">
<div class="row justify-content-center gallery-img-parent">
<a class="col-6" href="#" id="img1">
<img class="gallery-img" src="http://placehold.it/1/acd373">
</a>
<a class="col-3" href="#" id="img2">
<img class="gallery-img" src="http://placehold.it/1/2b3a5c">
</a>
<a class="col-3" href="#" id="img3">
<img class="gallery-img" src="http://placehold.it/1/003a35">
</a>
</div>
<div class="row justify-content-center gallery-img-parent">
<div class="col-3 gallery-double">
<a href="#" id="img4" class="gallery-double-child">
<img class="gallery-img-double" src="http://placehold.it/1/2b3a5c">
</a>
<a href="#" id="img5" class="gallery-double-child">
<img class="gallery-img-double" src="http://placehold.it/1/1a202e">
</a>
</div>
<a class="col-6" href="#" id="img6">
<img class="gallery-img" src="http://placehold.it/1/acd373">
</a>
<a class="col-3" href="#" id="img7">
<img class="gallery-img" src="http://placehold.it/1/003a35">
</a>
</div>
</div>
</div>
</div>
</div>Thank you so much for your assistance ♥ Any feedback would be greatly appreciated...