Extracting specific text from a link or paragraph or title or alt tag and show it again on same page but different location

I'm trying to duplicate/show the text Java Bean in another part (under the image) on the same page (visit http://www.miracleflooring.ca/cork.html to see how that works). Right now I have the info title & price show when you hover over the thumbnail, when mouse out, info hides.

My client asked me to show the title & price under each image (each div with class item) and I want to find a way to do that without having to re-do things manually for each item. Is there a way using css/javascript/php of doing so (I hope I'm clear on what I need to do).

<div class="item">
     <a href="#"><img src="imgs/products/cork/java-bean.jpg" alt="Java Bean" width="132" height="132" /></a>
     <div class="caption">
          <a href="imgs/products/cork/java-bean.jpg" rel="prettyPhoto[cork]" title="Java Bean">Java Bean</a>
          <p class="price">$4.99 sq-ft</p>
     </div>
</div>

I know some of the code seems like overkill but it was done that way and will take lots of work to change that.

I have no idea on how to do this and I'm still not sure what is the best way to do it as well but any help is much appreciated!

EDIT: I saw karim79 a开发者_运维知识库nswering something that may help but not sure if that's what I need (how to implement it too) extract text from tag

Try this in your CSS:

.item {position: relative; margin-bottom: 30px;}
.item .caption {position: absolute; bottom: -20px;}

That should get close enough to tweak it further yourself. The "margin-bottom" will expand the space available under each item, and a larger negative "bottom" will move the caption text lower down.