Welcome, Guest
Username: Password: Remember me
Use this Category for your support questions about Virtuemart Template - PureMart (SKU# FLEX-00010)

TOPIC: Category Page - Zoom on Hover

Category Page - Zoom on Hover 8 years 9 months ago #7234

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: 8 years 9 months ago by Kory Jackson.
The topic has been locked.

Category Page - Zoom on Hover 8 years 8 months ago #7270

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 8 years 8 months ago #7300

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

Category Page - Zoom on Hover 8 years 8 months ago #7303

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 8 years 8 months ago #7322

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.
Time to create page: 0.227 seconds

MaterialMart

for Virtuemart 3

Google's Material Design has finally arrived to Virtuemart

Virtumart Template - MaterialMart Virtumart Template - CleanMart Virtumart Template - CleanMart Virtumart Template - CleanMart

Fully responsive!

Buy Now   |   Live Demo