CSS Transition broken after Bootstrap Modal is closed

Question

I'm working on a Website to improve my CSS and HTML Skills. I'm a Student from Germany.

As a Framework I use Bootstrap. I have implemented an easy CSS transition and a link which opens a Bootstrap Modal.

Unfortunately after closing the Modal, the transition effect is broken. This is only when open a Modal. Every other Link has no effect. Here the HTML:

<section id="Leistungen">
        <div class="container">
            <h1>Leistungen</h1>
            <div class="row">
                <div class="col-xs-4">
                    <div id="hoertest" class="box">
                        <div class="leistungcontent">
                            <h3>kostenloser Hörtest</h3>
                            <br>
                            <p> <a class="button" data-toggle="modal" href="#modalHoertest">weitere Infos</a> </p>
                            <br> 
                        </div>
                    </div>
                </div>
      ...



<div id="modalHoertest" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <!--Modal Inhalt-->
                <div class="modal-content">
                    <div class="modal-header"> <img src="img/Bilder/hoertest.jpg" class="img-responsive"> </div>
                    <div class="modal-body">
                        <h3>kostenloser Hörtest</h3>
                        <p> Eine Hörminderung kann schleichend zunehmen, ohne dass Sie es bemerken. Es können auch nur bestimmte Frequenzbereiche betroffen sein. Lassen Sie Ihr Gehör kostenlos überprüfen, um eine eventuelle Hörminderung festzustellen. </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
                    </div>
                </div>
            </div>
        </div>

And the CSS:

/* Modals */
.modal-content {
    border-radius: 0px;
}

.modal-header {
    margin: 0;
    padding: 0;
}

#Leistungen .col-xs-4 {
    padding: 0;
}
.box{
    width: 100%;
    height: 300px;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    background-color: rgb(233,93,14);
    border: 2px solid white;
    overflow: hidden;
}

.leistungcontent {
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: rgba(255,255,255,0.8);
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#Leistungen .box:hover .leistungcontent,
#Leistungen .box:focus .leistungcontent{
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}

#hoertest {
    background: url('../img/Bilder/hoertest.jpg') 25% 50%; 
    background-size:cover;
}

first on hover everything works fine. The transparent div comes up to reveal the link. After clicking on the link, the modal opens. Again everything fine. Then after closing the Modal the transparent box don't hide back.

I tested this with Chrome and Firefox. In Firefox the bug is there too, but after hovering again over the div it fixes itself.

Images:

not clicked on the link yet

after clicking on the link and after closing the modal

Here is a codepen with the problem: http://codepen.io/anon/pen/qaJXkR

the first two squares are relevant. On the third (top row) is a link to google, to show, that normal links don't causing my problem.

Answer 1

I think the problem is your css code. Because the transparent div is still focused after closing modal. Remove following line:

#Leistungen .box:focus .leistungcontent

EDIT: Open a modal using JS instead of data-toggle solve the problem. For example an onClick: https://jsfiddle.net/n4novda1/1/

Answer 2

You could try applying some css styles using :visited to see if that is causing the issue, and maybe override it if that is the case