Overlay Responsive Image Text

overlay.html

<style>
    .banner {
        position:relative;
    }
    .overlay {
        position: absolute;
        top: 50%;
        left: 60%;
        width:40%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index:9999;
    }
</style>

<div class="banner">
    <img class="img-responsive" src="/images/banner.png" alt="">
    <div class="overlay">
        <div class="col-md-6">
            <a class="btn btn-lg btn-danger" role="button" href="index-fr.html" lang="fr">Acceuil</a>
        </div>
        <div class="col-md-6">
            <a class="btn btn-lg btn-danger" role="button" href="index-en.html" lang="en">Home</a>
        </div>
     </div>
</div>