[solved] How to get rollover borders on featured products images

[Lee 2]

Hello,

Can anyone advise us on how to get rollover borders on the images in Featured Products on the homepage? not sure where or how exactly to edit the css


thanks in advance

[Lee 2]

Hi, have figured it out myself - If anyone's interested:

using Version 1.2.5.0

in global.css at around line 1180 find the code:

#center_column div.products_block a.product_image img{
   float:none;
   margin:0px;    
}

to add the rollover border function you need to duplicate the line of code and include the 'hover' function, aswell as editing the margin slightly in the original line of code. Replace the above line of code with this:

#center_column div.products_block a.product_image img{
   float:none;
   margin:5px;    
#center_column div.products_block a.product_image:hover img {
   float:none;
   margin:0;
border: solid 5px #00FF00;
}

I've left the border at 5 points thickness and in bright green as an example, but you can change the colour and thickness. You may need to edit the spacing between images if you find that image borders overlap.

thanks