Jquery Hover change image and show box
<p>I have a bunch of images lined up that I want to on hover show a different image and add a box. I found a post on stack that helped me to do the first part but I am unsure how I should implement the part of showing the box. I am thinking that I would have to some how animate the opacity from 0 to 100 on the hover over and then back on the hover out but again I am not sure how to implement this. Any ideas?</p>

<p>My code so far:</p>

<p>HTML</p>

<pre><code>&lt;article class="homeFeatured"&gt;
    &lt;section&gt;
        &lt;a href="&lt;?php echo site_url($perm-&gt;category . '/' . $perm-&gt;perm_name) ?&gt;"&gt;
            &lt;img src="&lt;?php echo base_url('public/img/products/' . $perm-&gt;perm_name ?&gt;" alt="" /&gt;
            &lt;span&gt;View Item&lt;/span&gt;
        &lt;/a&gt;    
    &lt;/section&gt;
    &lt;section&gt;
        &lt;a href="&lt;?php echo site_url($perm-&gt;category . '/' . $perm-&gt;perm_name) ?&gt;"&gt;
            &lt;img src="&lt;?php echo base_url('public/img/products/' . $perm-&gt;perm_name ?&gt;" alt="" /&gt;
            &lt;span&gt;View Item&lt;/span&gt;
        &lt;/a&gt;    
    &lt;/section&gt;
    &lt;section&gt;
        &lt;a href="&lt;?php echo site_url($perm-&gt;category . '/' . $perm-&gt;perm_name) ?&gt;"&gt;
            &lt;img src="&lt;?php echo base_url('public/img/products/' . $perm-&gt;perm_name ?&gt;" alt="" /&gt;
            &lt;span&gt;View Item&lt;/span&gt;
        &lt;/a&gt;    
    &lt;/section&gt;
&lt;/article​​​​​​​​&gt;​
</code></pre>

<p>CSS:</p>

<pre><code>.homeFeatured section{
    position: relative;
    float: left;
    display: block;
    height: 303px;
    width: 230px;
    margin-left: 10px;
}

.homeFeatured span {
    position: absolute;
    top: 50%;
    left: 50px;
    width: 100px;
    background: #8cc63f;
    border: 1px solid #638d2b;
    line-height: 30px;
    text-align: center;
    display: none;
}
</code></pre>

<p>Jquery:</p>

<pre><code>$(".homeFeatured img")
           .mouseover(function() { 
               var src = $(this).attr("src").match(/[^\.]+/) + "Hover.jpg";
               $(this).attr("src", src); 
           })
           .mouseout(function() {
               var src = $(this).attr("src").replace("Hover", "");
               $(this).attr("src", src);
});​
</code></pre>

<p>​</p>
