Virtuemart Support :: Topic: Category Page

Welcome, Guest

TOPIC: Category Page - Zoom on Hover

Category Page - Zoom on Hover 10 years 5 months ago #7234

Kory Jackson	Hello, I am having a hard time finding where you would turn off the zoom for the category page. I have looked in the Flex pulgin and the only thing I see is an option to turn off the zoom on the product page but not the category page. Where is this function located so that I may turn on/off at will?
	Last Edit: 10 years 5 months ago by Kory Jackson. The topic has been locked.

Category Page - Zoom on Hover 10 years 5 months ago #7270

Support

Hi,

The Zoom Effect is a complex JavaScript function and only active in product details page.

The magnifying (not zooming) effect you see in the category page is a simple CSS transition animation to magnify the product picture. Therefore, it can be disabled simply by a CSS touch. No need to create a plugin parameter for that kind of simple thing.

To disable the hover magnify effect on browse page, open this CSS file:
/templates/YOUR_TEMPLATE/html/com_virtuemart/assets/css/flexibleVM2Global.css

and find this CSS rule:

#FlexibleBrowseThumbRow:hover .FlexibleThumbBrowseV1Pic img {
-webkit-transform: scale(1.1) translateZ(0);
    -moz-transform: scale(1.1) translateZ(0);
    -o-transform: scale(1.1) translateZ(0);
    transform: scale(1.1) translateZ(0);
}

and replace it with this:

#FlexibleBrowseThumbRow:hover .FlexibleThumbBrowseV1Pic img {
-webkit-transform: scale(1) translateZ(0);
    -moz-transform: scale(1) translateZ(0);
    -o-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
}

the magnifying effect will be gone.

Cheers,
Support.

The topic has been locked.

Category Page - Zoom on Hover 10 years 5 months ago #7300

Kory Jackson	I repeated the steps as advice and the magnifying is still there. Sending you a private message.
	Last Edit: 10 years 5 months ago by Kory Jackson. The topic has been locked.

Category Page - Zoom on Hover 10 years 5 months ago #7303

Kory Jackson

Receieved a response from Support:

To disable the hover magnify effect on browse page, open this CSS file:
/templates/YOUR_TEMPLATE/html/com_virtuemart/assets/css/flexibleVM2Global.css

Look for this CSS rule:

.FlexibleThumbBrowseV2Pic:hover img.browseProductImage {
-webkit-transform: scale(1.15) translateZ(0);
-moz-transform: scale(1.15) translateZ(0);
-o-transform: scale(1.15) translateZ(0);
transform: scale(1.15) translateZ(0);
}

and remove it completely.
The magnifying effect will be gone.

Works now, Request closed

The topic has been locked.

Category Page - Zoom on Hover 10 years 4 months ago #7322

Support	thanks for updating this post. I hope others will get benefit from this topic. Case solved. Topic closed. Cheers, Support
	The topic has been locked.