1;

<style>
.image {
    position:relative;
    display:inline-block;
}
.overlay {
    display:none;
}
.image:hover .overlay {
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;

    /* All other styling - see example */

    img {
        vertical-align:top; /* Default is baseline, this fixes a common alignment issue */
    }
}
</style>

2;

<div class="image"><img src="images/outlet.bmp" /><div class="overlay"><font color="#ff0000"><h1>•••••<br>~unk</h1></font></div></div>