Div with background image and display flex moves when modal is closed - css

Question

I have a row of thumbnails, with an animated title centered with display: flex.
When a thumbnail button is clicked a modal appears with a slideshow. After the modal is closed, the thumbnail of the selected gallery is shifted out of place.
I've done extensive css debugging on this and didn't find anything conclusive. I'm thinking its a side affect of Bootstrap modal JS or something to do with display: flex - display: block switch on hover.
.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;
}
.gallery-thumbs {
height: 90px;
.swiper-slide {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
z-index: 1;
border-right: 3px solid #fff;
}
}
.galleryThumbs {
div.galleryThumbWrapper {
padding-right: 2px;
padding-bottom: 2px;
>div {
width: 100%;
height: 100%;
}
}
.cta_box {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
color: white;
background: rgba(138, 196, 64, 0.6);
z-index: 2;
.cta_holder {
padding-bottom: 20px;
.title {
font-size: 1.2em;
line-height: 1em;
padding: 20px 20px 10px 20px;
font-family: proxima-nova;
font-weight: 600;
color: white;
text-transform: uppercase;
margin: 20px 0 0 0;
}
.button {
cursor: pointer;
color: white;
background: transparent;
border: 1px solid #fff;
border-radius: 30px;
display: inline-block;
padding: 3px 16px;
font-family: proxima-nova;
font-weight: 600;
font-size: 1em;
text-transform: uppercase;
}
}
}
&:last-child {
border: 0;
}
}
#media screen and (min-width: 768px) {
.gallery-top {
height: 320px;
}
}
#media screen and (min-width: 1024px) {
.col-lg-5ths {
width: 20%;
flex: 0 0 20%;
}
.gallery-top {
height: 420px;
}
.galleryThumbs {
.cta_box {
display: block;
justify-content: center;
align-items: center;
top: 100%;
transition: top 0.75s;
}
&:hover .cta_box {
top: 0;
display: block;
.cta_holder {
display: block;
}
}
}
}
<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">
<div class="cta_holder">
<p class="title">Headline 1</p>
<div>
<button type="button" class="button" data-toggle="modal" data-target="#galleryModal" data-gallery="{{gall.uri}}">View Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="galleryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<p>
My Modal
</p>
</div>
</div>
</div>
Here is a fiddle.
https://jsfiddle.net/sdetcp51/

Answer 1

This is because on #media screen and (min-width: 1024px), you set the top of .cta_box to 100%, which pushes the box to the bottom, but then you still have its bottom set to 0 from previous styles. That basically makes the box 0 height. Hence its content will overflow.
The move of the background image after modal is closed is due to the box content overflow.
The fix is easy. Just add overflow: hidden; on the .cta_box.
Fiddle: https://jsfiddle.net/sdetcp51/54/