CSS or jQuery hover effect to increase a fixed box and show absolute position larger version

does anyone know how i can make my colour boxes increase in size (in same position, guessing absolute position so it does not effect the other positions of colours) when you hover will show a larger version of the colour when you hover... maybe background image size? dont know.

I have added a image for a test on the red one.

#product_color_select li {
        display: inline-block;
        width: 30px;
        height: 25px;
        text-indent: -999999em;
        cursor: pointer;
}
/* interior colours */
#product_color_select li.eco-weave {
        background-color: #beaaaa;
}
#product_color_select li.aubergine-dream {
        background-color: #382643;
}
#product_color_select li.lime-citrus {
        background-color: #99a366;
}
#product_color_select li.blue-jazz {
        background-color: #435fa1;
}
#product_color_select li.sakura-pink {
        background-color: #bf3253;
}
#product_color_select li.hot-chocolate {
        background-color: #3b2b28;
}
#product_color_select li.tundra-spring {
        background-color: #c5c1d0;
}
#product_color_select li.black-sapphire {
        background-color: #131114;
}
#product_color_select li.luscious-grey {
        background-color: #7a6772;
}
#product_color_select li.wildberry-deluxe {
        background-image: url('http://ift.tt/1gHeNg4');
}

<ul class="fabric-select" id="product_color_select">
    <li class=" eco-weave" data-value="742" title="Eco Weave">Eco Weave</li>
    <li class=" blue-jazz" data-value="749" title="Blue Jazz">Blue Jazz</li>
    <li class=" sakura-pink" data-value="743" title="Sakura Pink">Sakura Pink</li>
    <li class="selected luscious-grey" data-value="744" title="Luscious Grey">Luscious Grey</li>
    <li class=" lime-citrus" data-value="748" title="Lime Citrus">Lime Citrus</li>
    <li class=" hot-chocolate" data-value="741" title="Hot Chocolate">Hot Chocolate</li>
    <li class=" black-sapphire" data-value="746" title="Black Sapphire">Black Sapphire</li>
    <li class=" wildberry-deluxe" data-value="727" title="Wildberry Deluxe">Wildberry Deluxe</li>
    <li class=" tundra-spring" data-value="747" title="Tundra Spring">Tundra Spring</li>
    <li class=" aubergine-dream" data-value="745" title="Aubergine Dream">Aubergine Dream</li>
</ul>

Thanks in advance

via Chebli Mohamed