isaacr25
asked on
CSS to overlay text on image
Is there someway to use CSS to overlay text on an image? I have images to which I'd like to overlay "click image to enlarge"
Thanks.
Thanks.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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>
Hi isaacr25,
Have a look at the following:
http://www.the-art-of-web.com/css/textoverimage/
Good Luck!
Gary
Have a look at the following:
http://www.the-art-of-web.com/css/textoverimage/
Good Luck!
Gary
ASKER
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.
My CSS tag is already narrowed down to only the images I need this for, not all images within the site.
ASKER
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?
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?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Sorry I think you cannot make above solution in DRUPAL
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
does it useful for you, tell me more I will improve it for you. :D
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>