Add legend text on bottom edge of photo

thuhue
thuhue used Ask the Experts™
on
How can legend text be most easily added on bottom edge of a photo jpg on an HTM page without editing it in photoshop or similar tool ?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
You basically set the image as relative and the text over it with an absolute position.

See here: http://css-tricks.com/text-blocks-over-image/

HTH,
Dan

Author

Commented:
Can we make the text have a transparent background ?

Commented:
Of course. If you follow that tutorial you'll see that was the default.
They had to add a span to achieve the semitransparent box look.

Just don't use the span.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
You said "Just don't use the span.", but the tutorial uses span.

Please provide sample code for the transparent look.

Commented:
Instead of
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
use
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>

That will put the text on top of the picture, with no semitransparent box.

Author

Commented:
Would user's different desktop/browser settings mess up our positioning of picture on the page?

Commented:
It works in all browsers. You would need to check on phones/tablets, but it should work there also.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial