Highlight text on image in CSS

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"> 
           <a href="http://tinypic.com?ref=11kbnlf" class="imgcolumn" target="_blank"><img src="http://i58.tinypic.com/11kbnlf.png"  alt=""></a>
         <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.

do u need something like this http://jsfiddle.net/aashi/6aSLQ/4/ — aashi, Jul 03 '14 at 11:03
@aashi No not the hover part. I mean initially without using opacity. — Richa, Jul 03 '14 at 11:04
@Richa that's what you wish to have. the actual height is `1px` since the `%` height is not being applied. inspect the fiddle and check. — T J, Jul 03 '14 at 11:16
@TilwinJoy It is being applied perfectly in local so that is not a problem for me — Richa, Jul 03 '14 at 11:19
@Richa -1. it's a problem for us, right..? if you don't provide a proper fiddle, we have to go after fixing issues other than the problem at hand. — T J, Jul 03 '14 at 11:20
@Richa : make `bg` dull and post data on top of it : http://stackoverflow.com/questions/6890218/css-background-image-opacity — NoobEditor, Jul 03 '14 at 11:20
@Richa: Are you looking for something like this: http://jsfiddle.net/abhitalks/6aSLQ/11/ ? — Abhitalks, Jul 03 '14 at 11:45
@abhitalks Thanks a lot. It is 90% of what i was looking for, Will need to make some changes but its fine :) — Richa, Jul 03 '14 at 11:57

aashi · Answer 1 · 2014-07-03T11:16:34.700

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;

 }

edited Jul 03 '14 at 11:16

answered Jul 03 '14 at 10:55

aashi

492
3
11

I don't see any change when i use it :( – Richa Jul 03 '14 at 10:57
is it useful..is this what u needed ?? – aashi Jul 03 '14 at 11:27
Useful but exactly what i am looking for. But +1 – Richa Jul 03 '14 at 11:29

score 1 · Answer 2 · answered Jul 03 '14 at 11:30

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">
    <a href="http://tinypic.com?ref=2ur6rk1" target="_blank" class="imgcolumn">&nbsp;</a>

     <h3 class="header3">Motivate Yourself</h3>

</div>

score 0 · Answer 3 · answered Jul 03 '14 at 11:09

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 */
}

Highlight text on image in CSS

3 Answers3