How do I create a div that expands with more information upon mouseover (with a background image?

Question

I would like to create a div that expands to two paragraphs when someone mouses over the first paragraph. The first paragraph would be an introduction. The second paragraph would explain a bit more and may contain a link to another page. I would like the second paragraph to be hidden until the person moused over the introductory paragraph. I have a background image which looks like a Post-it note.

My attempts at this are here: http://jsfiddle.net/sAW2c/52/ . The second paragraph isn't hidden, even though I constrained the size of the div and the padding on the P isn't working either. Can someone head me in the correct direction?

Answer 1

Adding overflow: hidden; to your #div1 seems to fix the issue: little link .

Note: Please use jsFiddle's CSS tab for styles next time. Inline styles are generically not very preferable.

Answer 2

Adding overflow hidden to the div should help. Check out this jsFiddle example . You should get the basic idea here but you'll need to tweak your background and text padding.

jQuery

$("#div1").hover(function() {
    $(this).animate({
        height: '300px'
    });
}, function() {
    $(this).animate({
        height: '100px'
    });
});​

HTML

<div id="div1" style="height:120px; width:206px;overflow:hidden;background: url('http://quiltersbee.com/images/white-postit.png') no-repeat 0 0; ">
    <p style="padding-left: 8;padding-right: 8;">This is the paragraph that I would like to be only 190px wide and placed on the background image.  It should be left-aligned. </p><br />
    <p style="padding-left: 8;padding-right: 8;">This is the paragraph I would like to hide until someone mousesovers the above paragraph.  Both paragraphs should be indented so they don't overlap the shading on the background image when this paragraph shows.  This paragraph may include a link.</p>
</div>​