Highlight text on image in CSS - html

Question

I have a some text on image, but the problem is i am using opacity so that text gets highlighted but it makes images look very dull.
Here is Updated Fiddle Link
Html
<div class="subcontainer">
<img src="http://i58.tinypic.com/11kbnlf.png" alt="">
<h3 class="header3">Motivate Yourself</h3>
</div>
CSS
.subcontainer {
width: 100%;
height: 100%;
float: left;
position: relative;
border: 3px solid white;
}
.imgcolumn {
background-repeat: no-repeat;
float: left;
width: 60%;
height: 80%;
margin-left: 130px;
margin-top: 45px;
position: absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.header3 {
z-index: 100;
position: absolute;
float:right;
color: black;
font-size: 25px;
margin-top: 175px;
text-align: center;
margin-left: 170px;
}
Is there any other way i can highlight text by keeping image as it is.
Note : I am trying to achieve something like this PAGE and i don't see image being blurred or having opacity.

Answer 1

use this fiddle
eg:
.header3 {
z-index: 100;
position: absolute;
float:right;
color: black;
font-size: 25px;
text-align: center;
position:absolute;
width:80%;
height:45%;
background-color:rgba(0,0,0,0.4);
top:20px;
left:24px;
line-height:150px;
}

Answer 2

You could also set the background-image of the parent container then lay another element over top of it with a semi-transparent background color as I have done here. Then, the highlight can be controlled via the opacity of the BACKGROUND of the overlay layer without affecting the text opacity.
http://jsfiddle.net/xDaevax/8Mzh9/
.subcontainer {
border: 3px solid white;
margin: 0px auto;
background: url("http://i61.tinypic.com/2ur6rk1.png") no-repeat center top;
height: 225px;
}
.imgcolumn {
width: 60%;
display: table;
height: 100%;
margin: 0px auto;
border: solid 1px #000000;
background-color: rgba(255, 255, 255, .6);
}
.header3 {
color: black;
font-size: 25px;
text-align: center;
position: relative;
top: -120px;
}
HTML
<div class="subcontainer">
<h3 class="header3">Motivate Yourself</h3>
</div>

Answer 3

The page you gave as an example uses contrasting colors for text and image. For example, that page uses dark images and the text on them is pure white.
If you want the text to stand out, use contrasting colors, or else use a contrasting drop shadow/outer glow (made with image editing software like PhotoShop), or add a semi-transparent background like this: http://jsfiddle.net/P22Cg/
.header3 {
z-index: 100;
position: absolute;
float:right;
color: black;
font-size: 25px;
margin-top: 175px;
text-align: center;
margin-left: 170px;
background-color: rgba(255, 255, 255, 0.5); /* I added this... */
padding: 5px; /* ... and this */
}