Javascript 如何使slideup可选框供用户使用Jquery选择定义的主题颜色？

我想了解如何制作一个可选择的主题图像，这样当你在图像上悬停时，它会向上滚动一个可选择/可点击的定义主题颜色

默认情况下会是这样：

将鼠标悬停后，它将滚动到顶部并与默认图像重叠，带有可单击的颜色主题，这意味着每个颜色选项卡都可单击：

我想知道如何创建这样的东西，以及如何将所选值传递到数据库/任何地方

请告知。谢谢

编辑： 我已经在JSFIDLE上发布了代码——但它可以与Chrome一起使用，但不能与ff一起使用

是否有办法将其转换为jQuery，以及如何继续进行第二部分，其中颜色框可以显示7个可选框，并单击它返回结果或部署哪个颜色模板

---

还请注意，悬停上显示的色调已经是模板的预设色调，我不希望允许用户根据调色板选择颜色。单击预定义的色调（例如黑色|白色）后，模板将更新黑色和白色色调。（除了预定义的颜色之外，用户不选择其他颜色）

我希望我可以，事实是我完全不知道从哪里开始，也不知道这到底是怎么做的。你签出了吗？对不起，你能解释一下它和Themeroller有什么关系吗？你可以使用theme roller定制主题并加载所需的css文件