Text on image on hover

        <a href="xxx.php" ><img src="<?php echo $_SESSION['picture'] ?>" id="ppicture"></img></a>

I want it to have onhover a text on it like for example edit this picture. I thought of backgroung image on css but this is not possible as I call the image from mysql and store the locati开发者_开发知识库on in a $_SESSION as you can see. I'd appreciate any help.

EG. http://tympanus.net/crop1.1/ if you hover over the image, a pencil will appear. Instead of pencil, I want text to appear

This can easily be done using css positioning:

(1) create a div tag to function as a container for both the image and the text. Add a p tag around your text.

(2) add position:relative to the div you just created:

#div-name {
    position: relative;
}

(3) add a new style for the text that positions it relative to the div:

#div-name p {
    position: absolute;
    width: 168px;
    left: 10px;
    bottom: 10px;
    background-color: #AAA;
}

You should now have a caption on your picture. I leave the styling up to you, and you may want to consider using JQuery to make your edit tag appear on hover.

Place a title="The text you want" attribute on the <img/>.

<a href="xxx.php" ><img src="<?php echo $_SESSION['picture'] ?>" id="ppicture" title="Your text" /></a>

Alternatively, you could use JavaScript to have a stylized tooltip appear. If you'd prefer this route, I'd recommend jQuery and the qTip plug-in.

Couldn't you just use the title attribute?

<img ... title="Edit This Picture" />

I'm not sure I fully understand your question but perhaps this is what you are looking for.

Using the title attribute of the img tag you can have hover text

<a href="xxx.php" ><img src="<?php echo $_SESSION['picture'] ?>" id="ppicture" title="Edit this picture"></img></a>