Darken Image Overlay And Add Text Over It In Css

How would I darken (add a semi-transparent overlay) and add text to this image (but centred horizontally and vertically) as below: HTML

body {
    margin: 0px;
}
.wrap{
    position:relative;
}
.wrapimg{
    width:100%;
    height:auto;
    display:block;
}
.text{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(255,255,255,.5);
    text-align:center;
}
.text:after{
    content:'';
    width:1px; height:100%;
    vertical-align:middle;
    display:inline-block;
}
.textspan{
    display:inline-block;
    vertical-align:middle;
}

<divclass="wrap"><imgsrc="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg"id="top"data-appear-animation="fadeIn" /><divclass="text"><span>Text over the image
        <br/>Second line</span></div></div>

Solution 2:

html

<div id='back'><div id='mask'><div id='text'>fsfsfsssf</div></div></div>

css

body{
    margin:0px;
}
#back{
    width:100%;
    height:500px;
    background: url("http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg") no-repeat;
    background-size:contain;
}
#mask{
    position:relative;  
    width:100%; 
    height:500px; 
    background:rgba(255,255,255,0.5); 
}
#text{
    position:absolute;
    top:230px;
    left:48%;
}

Fiddle: http://jsfiddle.net/6jf0nxd5/20/

Solution 3:

Try this

HTML :

<imgsrc="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg"id="top"data-appear-animation="fadeIn"><divclass="sometext">some text</div>

CSS :

#top {
    width: 100%;
    height: auto;
    opacity:.3;
    position:absolute;
    z-index:0;
}
body {
    margin: 0px;
}
.sometext {
    position:absolute;
    z-index:1;
}

Solution 4:

http://jsfiddle.net/6jf0nxd5/21/

HTML

<div class='imgWrap'>
    <span>This is some very long text that might or might now flow on top of the image</span><imgsrc="http://luxurylaunches.com/wp-content/uploads/2014/05/uber-london.jpg"id="top"data-appear-animation=fadeIn"></div>

CSS

.imgWrap{
    display:inline-block;
    background:#000;
    position:relative;
}

.imgWrap > img{ display:block; opacity:.5; }
.imgWrap > span{ position:absolute; display:table; text-align:center; z-index:1; height:100%; left:0; right:0; padding:20px; color:#FFF; font-size:2em; }
.imgWrap > span::after{ content:attr(data-title); display:table-cell; vertical-align: middle; }