How to remove rollover float animation on products page? | WordPress.org

Resolved joegillibrand
(@joegillibrand)

8 years, 9 months ago

Hi there,

I am trying to remove the feature where when I roll over a product thumbnail on my products page the image ‘jumps up’ and the top of the image is cut off. I think there is something called float on the images. When I inspect the element in chrome and change the float to none, the problem is fixed but not saved. I don’t know much about css or code so any help would be hugely appreciated!

Here is my page: http://www.novussport.com/?post_type=product

I am using the voyager child theme from THB. http://themeforest.net/item/voyager-the-geolocalized-multipurpose-wp-theme/8434194

Thanks!

https://wordpress.org/plugins/woocommerce/

Viewing 2 replies - 1 through 2 (of 2 total)

Andrea Gandino
(@andg)

8 years, 9 months ago
Hi,

to disable the jump, you might want to add the following to the frontend CSS:
```
.woocommerce ul.products li.product .thb-product-image-wrapper:hover a,
.woocommerce-page ul.products li.product .thb-product-image-wrapper:hover a {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}
```
Thread Starter joegillibrand
(@joegillibrand)

8 years, 9 months ago

hi thank you for the reply.

I actually tried that yesterday and it didn’t fix the problem, instead I changed the float from left to none in the line below that. this fixed the issue and the pictures no longer move!

Thank you very much for your help though!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘How to remove rollover float animation on products page?’ is closed to new replies.

Tags

float

In: Plugins
2 replies
2 participants
Last reply from: joegillibrand
Last activity: 8 years, 9 months ago
Status: resolved