CODEWITHSUNDEEP
jquerycss
geej
geej

Reputation: 335

show text over images using jquery slider

I implemented the easySlider as here http://cssglobe.com/lab/easyslider1.7/02.html and now i want to show some text over the image like this http://themeforest.net/item/community-innovation/full_screen_preview/101572

I see that both are different plugins but i want to use the easySlider plugin and show the text. I tried some things like getting the alt text and displaying it over the image but din't work. any ideas please?

regards

Upvotes: 0

Views: 8290

Answers (2)

Snowalker
Snowalker

Reputation: 309

instead of using <li> you can use <p> and <span> for the text so the code will be:

<p><img src=""/><span>Here the text</span></p>

This way the code will be valid :)

Upvotes: 0

Zeppelin
Zeppelin

Reputation: 284

You need to wrap the text to an element after each image, like this:

<li>
  <img src="[whatever]"/>
  <div>Here comes my text</div>
</li>

Then position with CSS by giving setting the <li>'s position property to relative, and absolute for the <div> that holds your text, with top/right/bottom/left properties, depending on your design.

#slider li { position: relative; }
#slider div { left: 10px; right: 10px; bottom: 10px; position: absolute; }

Note: If you want IE6 support, use the left/right+width property for the <div> in your CSS instead of left+right.

Upvotes: 4

Related Questions