[SOLVED] How can I change create gaps between tiles in a Flex Tile list or the width of a hover image so you can see the background image inbetween items

How can I change create gaps between tiles in a Flex Tile list or the width of a hover image so you can see the background image inbetween items

I have created a tile list with custom item renderer and in terms of functionality it works as it should. I reduced the width and height of the item renderer to 95% which then shows the tile lists background in the remaining 5% of that item. The problem is that only when I hover over the item, the background is covered up and I cant get a gap to appear between items. Is it possible to change the height and width of the hover over? Am I missing something simple?

<mx:Canvas id="Card2" label="Card2" width="100%" height="100%" backgroundColor="#FFFFFF">
    <mx:TileList id="tlCard2" x="10" y="10" dataProvider="{acCard2}" width="580" height="340" dropEnabled="true" borderThickness="0" maxColumns="4" maxRows="4" rowHeight="85" columnWidth="145" borderColor="#000000" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="solid" dragMoveEnabled="true" dragEnabled="true" backgroundImage="{imgGuide}" themeColor="#BCBCBC">
        <mx:itemRenderer>
            <mx:Component>                          
                <mx:Image source="{assets/' + data.imageId + '.jpg'+ '?cachekill=\'' + new Date()}" horizontalAlign="center" verticalAlign="middle" width="95%" height="95%" scaleContent="false" maintainAspectRatio="true"/>                              
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>
</mx:Canvas>

Thanks in Advance! :)

Solution