Guide: How to make jqZoom transparent

[jave.web]

I was pretty annoyed that jqZoom has a white background, or overall, any background at all...

 

Here is what you need to do, to make it transparent while not braking the view

 

CSS

#product .zoomWindow{ background: none; } /* removes the background */
  
#product #image-block:hover img.original_product_image{ visibility: hidden; } /* hides original image */

product.tpl

In product.tpl add class "original_product_image" to the jqZoom source image, code will loook for example like this:

{if $jqZoomEnabled && $have_image && !$content_only}
   <a class="jqzoom" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" rel="gal1" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')|escape:'html':'UTF-8'}">
      <img class="original_product_image" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"/>
   </a>
{* ..... *}