In the code snippet below, a bs4 modal is opened through a button when hovered over.
The problem arises when the modal is closed after being opened, causing the image to move unexpectedly. This issue can be resolved by hovering over the container again. The reason behind this behavior and how to fix it are areas of interest.
.container {
position: relative;
overflow: hidden;
}
.p-img {
opacity: 1;
width: 100%;
transition: 0.5s ease;
}
... (CSS styling continues)TOPTOPTOP
TOPTOPTOPTOPTOP
... (Modal content)
Update:
If the modal is triggered through javascript, the strange movement of the image will not occur.
<button type="button" class="btn btn-primary w-100">launch modal</button>
$(function(){
$("button").click(function() {
$("#myModal").modal('toggle');
});
});