Text centered on graphic

by Virtual

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="image-overlay col-md-4 col-sm-6"> <a title="has audio" class="fancybox-media" href="http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"> 
    <img src="http://placehold.it/600x600/030&text=+" />
                <div class="icon">
                    <p><a href="#">inter<br/>views</a>
    </p>
</div>
</a>
</div>

CSS

.image-overlay {
    position:relative;
    text-align:center;
}
.image-overlay .icon {
    position: absolute;
    text-align:center;
    font-size: 3.5em;
    line-height:1em;
    font-weight:bold;
    margin: 0 auto;
    background-size: contain;
    width: 40%;
    height: 100px;
    top: 30%;
    left: 30%;
    background-repeat: no-repeat;
    background-position: bottom;
}
.image-overlay .icon p a {
    color:#fff;
}
.image-overlay .icon p a:hover { text-decoration:none; color:#000;}
img {
    max-width: 100%;
    height: auto;
}