How to make a slideup selectable box for user to pick a defined theme color with Jquery?
<p>I would like to find out how to make a selectable theme image, such that when you on hover the image it will scroll up a selectable/clickable defined theme color.</p>

<p>It will be something like that on default: </p>

<p><img src="http://i.stack.imgur.com/LdHtv.png" alt="Image on default"></p>

<p>After you hover your mouse, it will scroll to top and overlaps the default image, with clickable color themes, which means each of the color tabs are clickable:</p>

<p><img src="http://i.stack.imgur.com/8eoZC.png" alt="Image when hover, with selectable themes"></p>

<p>I will like to know what to go about creating something like that, and how is it possible to pass the selected value to the database/wherever.</p>

<p>Kindly advise. Thanks.</p>

<p><strong>edit:</strong> 
I have put up the codes on jsfiddle - <a href="http://jsfiddle.net/GgfNq/1/" rel="nofollow">http://jsfiddle.net/GgfNq/1/</a> but it works with Chrome, but not ff. </p>

<p>Is there any way to convert it into jQuery and also how to proceed with the second part where the color boxes can show up the 7 selectable boxes, and clicking it to return a result or which color template to deploy. </p>

<p>Note also that the color tones as shown on hover are already pre-set tones for the templates, I do not wish to allow users to pick colors based on from color palette. Upon clicking on the pre-defined color tones e.g. black|white, the template will update the black and white color tones. (users do not select colors aside from the pre-defined)</p>
