How to access element inside div in jquery and make exanding div transparent

Question

I want a specific div to expand when the user hovers over it.

     <td><h4>Like Football</h4></td>

I am unclear how to access an element inside a div tag. I also want the background of the expanding div to be transparent to a certain extent like done on this website where Fifa 12 is displayed. Please help.

<div>
   <a href="">
   <img src="images/fifa.jpg" /></a>
</div>

<div class="wrapper">
    <table>
        <tr>
            <td>
                <img src="images/arrow.jpg"  height="28" width="28"/ >
            </td>
            <td>
                <h4>Like Football</h4>
            </td>
        </tr>
    </table>

    <div class="wrapperhover">

        <p class="wrappercontent" id="p">
            <span>Download FIFA 12 on Xperia™!</span>
            <a href="" onclick=""><span>Find more</span></a>
        </p>
    </div>
</div>

CSS

.wrapper
{
        background-color:Black;
        color:White;
        width:245px;
        height:100px;
        margin-top:-100px;
        position:absolute;       
}

.wrapperhover
{
    height:100px;
}

JQUERY

$(document).ready(function () {

    $(".wrapperhover").hide();

    $(".wrapper").hover(function () {
        $(".wrapperhover").show();
        var contentHeight = 0;
        $(this).children().each(function () {
            contentHeight += $(this).height();
        });
        $(this).animate({
         height: '150px',
         marginTop: "-150" 
        }, 300);
    }, function () {
        $(this).animate({
            height: '100px', marginTop: "-100"
        }, 300);
        $(".wrapperhover").hide();
    });

});

Answer 1

I've made a fiddle here. After seeing an example of what you're looking for I think is close to what you want. You'll probably have to tweak some of the gradient css but I think the idea is there. This should work in all browsers. The transparency isn't added in the site you mentioned, it's there from the start so I've added a class .gradient to the .wrapper div. Here is the code:

   <div class="wrapper gradient">
       <table>
            <tr>
                <td>
                    <img src="http://www.freeclipartnow.com/d/40228-1/arrow-blue-rounded-right.jpg"  height="28" width="28"/ >
                </td>
                <td>
                    <h4> Like Football</h4>
                </td>
            </tr>
       </table>

       <div class="wrapperhover">
            <p class="wrappercontent" id="p">
                <span>Download FIFA 12 on Xperia™!</span>
                <a href="" onclick=""><span>Find more</span></a>
            </p>
       </div>
  </div>

The js isn't really relevant to this answer anymore since we can just use css. If you need to look at the js refer to the fiddle above. Here is the CSS I added using this gradient editor:

    .gradient
    {
        background: -moz-linear-gradient(top, rgba(40,52,59,1) 21%, rgba(40,52,59,0.82) 35%, rgba(130,140,149,0.3) 76%, rgba(181,189,200,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(21%,rgba(40,52,59,1)), color-stop(35%,rgba(40,52,59,0.82)), color-stop(76%,rgba(130,140,149,0.3)), color-stop(100%,rgba(181,189,200,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(40,52,59,1) 21%,rgba(40,52,59,0.82) 35%,rgba(130,140,149,0.3) 76%,rgba(181,189,200,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(40,52,59,1) 21%,rgba(40,52,59,0.82) 35%,rgba(130,140,149,0.3) 76%,rgba(181,189,200,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(40,52,59,1) 21%,rgba(40,52,59,0.82) 35%,rgba(130,140,149,0.3) 76%,rgba(181,189,200,0) 100%); /* IE10+ */
        background: linear-gradient(top, rgba(40,52,59,1) 21%,rgba(40,52,59,0.82) 35%,rgba(130,140,149,0.3) 76%,rgba(181,189,200,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28343b', endColorstr='#00b5bdc8',GradientType=0 ); /* IE6-9 */
    }