Preview a div expansion
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

When users click the 'Learn more' button on the front page, a 'how it works' widget expands.

The how-it-works widget has three boxes that each expand when clicked. I'd like to make it more clear that those boxes expand, so the user knows they won't be taken to a different page. Specifically, I want the info boxes to partially expand when hovered over, revealing a little bit of the hidden content.

Please provide the javascript and css for this feature. Here are some more guidelines:

  • .info-box is the info box that contains the initially visible text ('Describe your coding task...'), as well as the .more-info div that is initially hidden ('Posting a bounty is easy').
  • When hovering over .info-box, the .more-info div should partially expand, revealing the top line or two of its text, which fades toward the bottom. The animation should be smooth.
  • There should be a single parameter to set how much of .more-info is shown when .info-box is hovered over.
  • You can use a jQuery plugin if it exists, and link to it. Please stick to jQuery.
  • I'd rather there not be a separate div for the partial text that expands
  • It should work in recent versions of Chrome, Firefox, Safari, and IE9.

No need to replicate the three info boxes on Bountify- I just want the basic functionality for a single info box containing any text you want.


What sort of browser compatibility do you need? (That is, for niceties like the gradient and height animation.)
minitech 9 years ago
Modern browsers please: Chrome, FF, Safari, IE9. No need to worry about IE8 and below. I'll update the question.
bevan 9 years ago
awarded to minitech

Crowdsource coding tasks.

1 Solution

Winning solution

Here's a demo HTML page! Make sure to set the gradient's destination colour to the right one for the background.