CODEWITHSUNDEEP
javascriptcss
zach
zach

Reputation: 33

Displaying text over an image with javascript

I am looking for a JavaScript(or anything really) framework that can add text with a semi opaque background to images. I am also wanting something with simple mouse over support. I've seen some that use solely css but wont work in my case due their use of multiple images (My images are hi res and I don't want to waste bandwidth). Another I found worked but created invalid code and added too much to load times. Is there a framework out their or am I just going to have to code my own?

Thanks

Upvotes: 3

Views: 4583

Answers (1)

Marc B
Marc B

Reputation: 360672

<div style="position: relative; height: 200px; width: 200px;">
   <img src="something.jpg" width="200" height="200" alt="Your Image" />
   <div style="position: absolute; height: 200px; width: 200px; left: 0; top: 0; line-height: 200px; vertical-align: middle; opacity: 0.5;">Your semi-opaque text</div>
</div>

going off the top of my head, but wouldn't something like that do the trick?

Upvotes: 4

Related Questions