CSS to overlay text on image

img {
   position:absolute;
   top:0px;
   left:0px;
   z-index:10px;
}

.txt {
  position:absolute;
  top:35px; // depends upon image height we can adjust this.
  left:35px; // depends upon image width we can adjust this.
  z-index:20px;
}



<img src="" width="" height="" />
<div class="txt">click image to enlarge</div>

Have you tried this
http://snook.ca/archives/html_and_css/content_overlay_css/

First of all you need to create a relative container (say div) which holds the image and the text. The position the image and text relative to that div.

You can either make the image as background of a container and position the text over it.

.container{
 position:relative;
}
 
.absImg {
   position:absolute;
   top:0px;
   left:0px;
   z-index:0px;
}
 
.absTxt {
  position:absolute;
  top:50px; 
  left:50px; 
  z-index:9999px;
}
 
 
HTML:
 
<div class="container">
 <img src="..." class="absImg"/>
 <div class="absTxt">Click Here</div>
</div>

Select allOpen in new window

Hi isaacr25,

Have a look at the following:
http://www.the-art-of-web.com/css/textoverimage/

Good Luck!

Gary

I should have mentioned this, but I'm using Drupal (CMS) and I can't hard-code the actual html/php pages. This needs to be a CSS-only solution... is this possible?

My CSS tag is already narrowed down to only the images I need this for, not all images within the site.

Update to my last post:
I've decided to use an image instead of text (the image has some text in it).

So how can I use only css to overlay the "click to enlarge" image I created on top of other images?

Sorry I think you cannot make above solution in DRUPAL

you need to modify msgWrapper.js as per your need. :D

Hi isaacr25,

does it useful for you, tell me more I will improve it for you. :D