Responsive Lightbox

HTML

<div class="overlay">
    <div class="container">
        <img src="http://placehold.it/350x150" alt="" />
        <div class="caption">Platzhalter</div>
        <a class="prev" href="#">Zurück</a>
        <a class="next" href="#">Weiter</a>
    <div>
</div>

CSS

.overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: rgba(0,0,0,.75);
    text-align:center;
    font-size:0;
}

.overlay:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.container {
    display:inline-block;
    vertical-align:middle;
    position:relative;
    box-shadow:0 0 5px rgba(0,0,0,.5);
    font-size:1rem;
}

.container img {
    vertical-align: bottom;
    max-width:100%;
    max-height:100%;
}

.container .caption {
    position:absolute;
    bottom:0;
    width:100%;
    background-color:rgba(0,0,0,.5);
}

.container .prev {
    position:absolute;
    left:0;
    top:50%;
}

.container .next {
    position:absolute;
    right:0;
    top:50%;
}

.container .prev, .container .next {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}