Bootstrap 4 Modal Open/close causes image position changing - css

Question

I have following simple code snippet that opens a bs4 modal through a button.
The button appears by hovering the container.
The issue is that after the open the modal through the button and then close. The image moves up unexpectedly. The position of the image can be restored by hover the container again. I just wonder why this behavior happens and how to fix it.
https://jsfiddle.net/hb6n71zg/1/ code snippet link.
.container {
position: relative;
overflow: hidden;
}
.p-img {
opacity: 1;
width: 100%;
transition: 0.5s ease;
}
.p-capt {
background: white;
width: 100%;
transition: 0.5s ease;
opacity: 0;
position: absolute;
bottom: -10%;
text-align: center;
}
.container:hover .p-img {
opacity: 0.3;
}
.container:hover .p-capt {
opacity: 1;
bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<h2>TOPTOPTOP</h2>
<p>TOPTOPTOPTOPTOP</p>
<div class="container">
<img class="p-img w-100" src="https://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg" />
<div class="p-capt">
<button type="button" class="btn btn-primary w-100" data-toggle="modal" data-target="#myModal">launch modal</button>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Update:
If I trig the modal through javascript, this weird behavior would not happen.
<button type="button" class="btn btn-primary w-100">launch modal</button>
$(function(){
$("button").click(function() {
$("#myModal").modal('toggle');
});
});

Answer 1

It has to do with a very weird combination between three different conditions:
.container having overflow: hidden;
.container having content overflowing
.container not being :hovered unless you move the mouse, when the modal closes.
The solution is to remove the overflow:hidden from .container and obtain the button clipping effect of the button by using the button's own container (.p-cont):
.container {
position: relative;
}
.p-img {
opacity: 1;
width: 100%;
transition: 0.5s ease;
height: auto;
}
.p-capt {
background: white;
width: 100%;
transition: 0.5s ease;
opacity: 0;
position: absolute;
text-align: center;
padding-left: 15px;
padding-right: 15px;
overflow: hidden;
bottom: 0;
height: 0;
}
.p-capt .btn-primary {
position: relative;
left: -15px;
}
.container:hover .p-img {
opacity: 0.3;
}
.container:hover .p-capt {
opacity: 1;
height: 38px;
}
/* this removes the button's outline when active, as IMHO it didn't look right (it was cut off by the overflow:hidden. Totatlly optional, of course */
.p-capt .btn-primary:not(:disabled):not(.disabled).active:focus,
.p-capt .btn-primary:not(:disabled):not(.disabled):active:focus,
.p-capt .show>.btn-primary.dropdown-toggle:focus,
.p-capt .btn-primary.focus,
.p-capt .btn-primary:focus {
box-shadow: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<h2>TOPTOPTOP</h2>
<p>TOPTOPTOPTOPTOP</p>
<div class="container">
<div class="row">
<div class="col">
<img class="p-img d-block w-100 h-auto" src="https://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg" />
<div class="p-capt">
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal">launch modal</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Note: I also used Bootstrap v4.4.1 instead of your v4.0.0 but it doesn't affect the example. I just wanted to make sure that's not the cause and didn't bother to change it back.