Q:

bootstrap modal disappears when mouse off browser window, doesn't return

I made a quick CodePen to highlight the issue.
https://codepen.io/robbullock/pen/NwWqYE
1) Hover over the card
2) Click "Request Access" button
3) Mouse off the screen and the modal disappears and doesn't come back. 
I believe the issue that's causing the problem is with the ".content .content-overlay" classes below, along with the corresponding hover effects.
.content .content-overlay {
background: rgba(51, 51, 51, 0.9);
position: absolute;
height: 270px;
width: 270px;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
border-radius:8px;
}

.content:hover .content-overlay {
opacity: 1;
}

.content:hover .content-details {
top: 50%;
left: 50%;
opacity: 1;
}

Is there any way to prevent this type of behavior?

A:

That is because you have left the .content-overlay element unclosed and so it wrap the modal element as well. So when you mouse out of the page, the :hover rules do not apply and the modal goes away as its container is hidden. 
See https://codepen.io/anon/pen/mqdedj

