- This topic has 3 replies, 2 voices, and was last updated 8 years, 4 months ago by
.
Hey,
I was wondering if it was possible to have an “on-hover” zoom of the selected photo when on the product page.
Also, is there a way we could implement keyboard controls to switch between images ? (left/right arrow, etc.)
Thanks in advance!
Hi @jbgolsong,
I hope you are well today and thank you for your question.
Could you please share me the product page URL from your site and tell on what image you want to implement “on-hover” zoom effect so that i can help you to achieve it?
Best regards,
Shufflehound teamHi @Shufflehound Support , This is a typical product page example : http://knitbestdemo.tk/product/womens-ladies-v-neck-short-sleeve-open-front-loose-cardigans/
What we would like would be to enable an on-hover effect where it zooms into the photo slightly, as well as maybe being able to utilise the arrow keys on the keyboard to navigate between the product galler.
Thanks again!
JBWhat we would like would be to enable an on-hover effect where it zooms into the photo slightly,
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.woocommerce div.product div.images a:hover img { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } .woocommerce div.product div.images img{ transition: 0.3s all ease-in-out; }as well as maybe being able to utilise the arrow keys on the keyboard to navigate between the product galler.
You can use this in the product lightbox by enabling WooCommerce Lightbox option as shown in the attached screenshot.
