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.

@aashi No not the hover part. I mean initially without using opacity. — Richa
– Richa, Commented Jul 3, 2014 at 11:04
@Richa: Are you looking for something like this: jsfiddle.net/abhitalks/6aSLQ/11 ? — Abhitalks
– Abhitalks, Commented Jul 3, 2014 at 11:45

aashi · Accepted Answer · 2014-07-03 11:16:34Z

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 3, 2014 at 11:16

answered Jul 3, 2014 at 10:55

aashi

4923 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Richa Over a year ago

I don't see any change when i use it :(

aashi Over a year ago

is it useful..is this what u needed ??

Richa Over a year ago

Useful but exactly what i am looking for. But +1

xDaevax · Accepted Answer · 2014-07-03 11:30:45Z

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>

sampathsris · Accepted Answer · 2014-07-03 11:09:52Z

0

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

answered Jul 3, 2014 at 11:09

sampathsris

22.4k12 gold badges74 silver badges102 bronze badges

Collectives™ on Stack Overflow

Highlight text on image in CSS

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related