Javascript CSS或jQuery悬停效果，增加固定框和显示绝对位置的较大版本

当您悬停时，我如何使我的颜色框的大小增加（在相同的位置，猜测绝对位置，这样它就不会影响颜色的其他位置），当您悬停时，将显示更大版本的颜色。这会使用背景图像大小吗

我在红色的上面添加了一个测试图像

#产品(颜色)选择li{
显示：内联块；
宽度：30px；
高度：25px；
文本缩进：-999999 em；
光标：指针；
}
/*内饰颜色*/
#产品颜色选择li.eco-weave{
背景色：#beaaa；
}
#产品\颜色\精选li.茄子-梦想{
背景色：#382643；
}
#产品\颜色\精选li.酸橙-柑橘{
背景色：#99a366；
}
#产品颜色选择蓝色爵士乐{
背景色：#435fa1；
}
#产品颜色选择李樱粉{
背景色：#bf3253；
}
#产品颜色精选李。热巧克力{
背景色：#3b2b28；
}
#产品颜色选择li.tundra-spring{
背景色：#c5c1d0；
}
#产品颜色精选锂黑色蓝宝石{
背景色：#131114；
}
#产品颜色精选丽。甘美-灰色{
背景色：#7a6772；
}
#产品颜色精选李。野生浆果-豪华型{
背景图像：url（'http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/wildberry-deluxe.png');
}

eco weave
蓝色爵士乐
樱花粉
甘美灰
莱姆柑橘
热巧克力
黑色蓝宝石
wildberry deluxe
苔原泉
茄子梦

在元素悬停处使用CSS3

缩放属性。希望这有帮助

此外，您还可以使用
transition
属性添加一些缓和


#产品(颜色)选择li{
显示：内联块；
宽度：30px；
高度：25px；
文本缩进：-999999 em；
光标：指针；
垂直对齐：顶部；
}
#产品颜色选择li:hover{
-webkit转换：规模（1.2）；
-moz变换：比例（1.2）；
转换：比例（1.2）；
}
/*内饰颜色*/
#产品颜色选择li.eco-weave{
背景色：#beaaa；
}
#产品\颜色\精选li.茄子-梦想{
背景色：#382643；
}
#产品\颜色\精选li.酸橙-柑橘{
背景色：#99a366；
}
#产品颜色选择蓝色爵士乐{
背景色：#435fa1；
}
#产品颜色选择李樱粉{
背景色：#bf3253；
}
#产品颜色精选李。热巧克力{
背景色：#3b2b28；
}
#产品颜色选择li.tundra-spring{
背景色：#c5c1d0；
}
#产品颜色精选锂黑色蓝宝石{
背景色：#131114；
}
#产品颜色精选丽。甘美-灰色{
背景色：#7a6772；
}
#产品颜色精选李。野生浆果-豪华型{
背景图像：url（'http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/wildberry-deluxe.png');
}

eco weave
蓝色爵士乐
樱花粉
甘美灰
莱姆柑橘
热巧克力
黑色蓝宝石
wildberry deluxe
苔原泉
茄子梦
增加悬停时的宽度？是悬停时的宽度和高度肯定会起作用，最好在每个角落增加宽度，如果这有意义的话，可以扩展当前的宽度，比如？否，有点像下面的答案-效果无论如何，但不扫视的图像，使其质量差。是否无论如何，没有使用缩放作为其缩放背景图像-图像已设置为更大的图像大小，所以李只是需要增加我想这样的图像质量仍然是好的。使用缩放是完美的效果！！正是我想要的，但不想缩放背景图像，因为它已经很大了。您可以将所有
li
的初始缩放值设置为小于1的某个值，然后悬停时将该值设置为1，即默认大小。尝试了该操作，但实际上无法满足我的需要。使初始thamb更小，位置如填充/边距，所以我想我可能需要其他解决方案。。。不确定。对于全尺寸图像，大尺寸是200x143，所以prob想使用其中的一半。@James请与这些图像共享您的工作的fiddles链接