Version : 4.4.1 Pro Light & Lucid (3 column)
Step - 1
-------------------------------------------
Add this code include end of page skin/common_files/css/main.css
---------------------------------------------
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: brown;
padding: 3px;
left: -1000px;
border: 0px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
left: 300px; /*position where enlarged image should offset horizontally */
Step - 2
----------------------------------------------------------------
add this code skin/common_files/customer/main/products_t.tpl
line 62 (maybe different line other skins)
----------------------------------------------------------------
Find this code:
<a href="{$product.alt_url|default:$product.page_url| amp}">{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.tmbn_x image_y=$product.tmbn_y product=$product.product tmbn_url=$product.tmbn_url}</a>
And replace this code:
<a class="thumbnail" href="product.php?productid={$products[product].productid}&cat={$cat}&page={$navigation_p age}"><span><img src="image.php?id={$product.productid}&type=P" /></span>{include file="product_thumbnail.tpl" productid=$product.productid image_x=$products.tmbn_x|default:$config.Appearanc e.thumbnail_width image_y=$products.tmbn_y product=$products.product tmbn_url=$products.tmbn_url}</a>
Finish
If you want to add this options to other skins you must change 2 files below
1- skin/skin_name/css/altskin.css (step-1)
2- skin/skin_name/customer/products_t.tpl (step-2)