My layout includes a line of thumbnail images, each accompanied by an animated title that is centered using the display: flex property. The issue arises when clicking on a thumbnail to open a modal with a slideshow. Upon closing the modal, the selected gallery's thumbnail is displaced from its original position. Despite thorough CSS debugging efforts, I have been unable to identify a definitive cause. My suspicion lies with either Bootstrap modal JavaScript or a potential conflict involving the use of display: flex and display: block during hover interactions.
.gallery-top {
height: 220px;
margin-bottom: 10px;
.swiper-slide {
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
z-index: 1;
border-right: 3px solid #fff;
}
}
.gallery-row {
padding: 0 0 0 2px;
}
/* Additional CSS rules omitted for brevity */
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="row gallery-row">
<div class="col-12 col-md-6 col-lg-5ths galleryThumbs embed-responsive embed-responsive-1by1">
<div class="embed-responsive-item galleryThumbWrapper">
<div style="background: url('http://lorempixel.com/400/400/') no-repeat center center; background-size: cover;">
<div class="cta_box">
<div class="cta-content">
/* HTML template continues */
</div>
</div>
</div>
</div>
</div>
</div>
/* Modal markup goes here */
For reference, you can view a fiddle of this setup here.