title: Highlight text on image in CSS
body: <p>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.</p>
  
  <p>Here is Updated <strong><a href="http://jsfiddle.net/6aSLQ/1/" rel="nofollow">Fiddle Link</a></strong></p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>    &lt;div class="subcontainer"&gt; 
             &lt;a href="http://tinypic.com?ref=11kbnlf" class="imgcolumn" target="_blank"&gt;&lt;img src="http://i58.tinypic.com/11kbnlf.png"  alt=""&gt;&lt;/a&gt;
           &lt;h3 class="header3"&gt;Motivate Yourself&lt;/h3&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> .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;
   }
  </code></pre>
  
  <p>Is there any other way i can <strong>highlight text</strong> by keeping image as it is.</p>
  
  <p><strong>Note</strong> : I am trying to achieve something like this  <strong><a href="http://www.lacroixdesign.net/case-studies" rel="nofollow">PAGE</a></strong> and i don't see image being blurred or having opacity.</p>