Change css for hover over text box - html

Question

The original idea came from the following
http://freshdesignweb.com/demo/2012/09/css3-hover-effects/
It is a simple hover over image then text relevant to that image drops below it.
I want to modify the area in which the text displays to add rich snippet code, a buy it now button, and an add to cart button. I am having two issues 1) any img scr added between the li automatically appears in the image box and 2) anywhere you click on the image or box takes you to another page since it is an anchor.
the css
.our_menu{width:970px; margin:0 auto;}
ul,li{margin:0;padding:0;list-style:none}
.menu .item{float:left;position:relative}
.menu .item a{background-color:#FFF;color:#000000;display:block;overflow:hidden;position:absolute;box-shadow:0 0 7px 0 #CCC;-moz-box-shadow:0 0 7px 0 #CCC;-webkit-box-shadow:0 0 7px 0 #CCC}
.menu .item a:hover{z-index:2;-webkit-transition:height .2s ease-in-out;-moz-transition:height .2s ease-in-out;-o-transition:height .2s ease-in-out;-ms-transition:height .2s ease-in-out;transition:height .2s ease-in-out}
.menu .item a h3{border:0;font-family:"Times New Roman",sans-serif;font-size:17px;margin:0 0 .5em 0;padding:0;text-transform:uppercase;}
.menu .item a p{color:#432;font-size:16px;}
.our_menu .menu{float:left;margin:0 0 50px 0}
.our_menu .menu .item{background-position:9px -791px;height:170px;padding:0 0 0 7px;width:316px}
.our_menu .menu .item a{height:25px;padding:114px 0 0 14px;top:10px;width:295px;text-decoration:none;}
.our_menu .menu .item a:hover{height:550px;padding-top:179px}
.our_menu .menu .item a img{clip:rect(0px,283px,96px,0px);height:164px;position:absolute;top:14px;width:283px}
.our_menu .menu .item a:hover img{clip:auto}
#media only screen and (max-width: 967px) {
.our_menu{ width:660px;margin:0 auto;}
}
#media only screen and (max-width: 620px) {
.our_menu{ width:330px;margin:0 auto;}
}
Original html
<div class="our_menu">
<ul class="menu">
<li class="item">
<a href="#">
<h3>Appetizers</h3>
<p> Start a meal off right with your favorite from our menu of signature appetizers. Can't choose just one? You don't have to</p>
<img src="images/2.jpg" alt="" height="164" width="283">
</a>
</li>
The following is the rich snippet code I need to use to make the text in the box.
<span itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="http://www.example.com/images/hello.jpg" />
<h3 itemprop="name">Name of Product Here</h3>
<a itemprop="url" href="http://www.example.com/index.html"></a>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer"><h3 itemprop="price" class="price">$2.00</h3></span>
<p>
<span itemprop="description">Widget</span><br/>
UPC: 1234567890
</p>
<span>
The following is what I had working up until I wanted to add the buy it now button and add to cart button.
<a class="paypal"><img src="images/cart.gif" alt=""></a><a class="paypal"><img src="images/buynow.gif" alt=""></a>
<div class="our_menu">
<ul class="menu">
<li class="item">
<a itemprop="url" href="http://www.example.com/">
<span itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="images/hello.jpg" height="164" width="283"/>
<h3 itemprop="name">Product Name</h3>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer"><h3 itemprop="price" class="price">$2.00</h3></span>
<p>
<span itemprop="description">Widget</span><br/>
UPC: 074804800012<br/>
</p>
</a>
</li>
I created a jsFiddle thanks for the suggestion.
http://jsfiddle.net/3CmGN/
In the fiddle when you hover over the image a box containing text drops down. I want this effect as is. The issue I am having is I do not want the image as a anchor tag and want to add an "add to cart" and "buy it now" button under the UPC in the example.